基于three.js編寫的一個(gè)項(xiàng)目類示例代碼
WebVR
在開始之前，先對WebVR進(jìn)行介紹，WebVR是一個(gè)實(shí)驗(yàn)性的Javascript API，允許HMD（head-mounted displays）連接到web apps，同時(shí)能夠接受這些設(shè)備的位置和動(dòng)作信息。這讓使用Javascript開發(fā)VR應(yīng)用成為可能（當(dāng)然已經(jīng)有很多接口API讓Javascript作為開發(fā)語言了，不過這并不影響我們?yōu)閃ebVR感到興奮）。而讓我們能夠立馬進(jìn)行預(yù)覽與體驗(yàn)，移動(dòng)設(shè)備上的chrome已經(jīng)支持了WebVR并使手機(jī)作為一個(gè)簡易的HMD。手機(jī)可以把屏幕分成左右眼視覺并應(yīng)用手機(jī)中的加速度計(jì)、陀螺儀等感應(yīng)器，你需要做的或許就只是買一個(gè)cardboard。下面話不多說了，來一起看看本文的正文：
這是一篇關(guān)于怎么樣基于three.js進(jìn)行可配置的three.js的對象創(chuàng)建的文章
編寫一個(gè)three.js的基類
這是創(chuàng)建的一個(gè)Three.js基類其中包含了場景，相機(jī)，渲染器，控制器以及一些方法
// VRcore.js
import * as THREE from 'three';
const OrbitControls = require('three-orbit-controls')(THREE)
let Scene, Camera, Renderer, Controls, loopID;
function createScene({domContainer = document.body, fov = 50,far = 1000}){
if (!(domContainer instanceof HTMLElement)) {
throw new Error('domContainer is not a HTMLElement!');
}
// 初始化 scene
Scene = new THREE.Scene();
// 初始化 camera
Camera = new THREE.PerspectiveCamera(fov, domContainer.clientWidth / domContainer.clientHeight, 1, far);
Camera.position.set( 200, 200, 200 );
Camera.lookAt(Scene.position);
Scene.add(Camera);
// 初始化 renderer
Renderer = new THREE.WebGLRenderer({ canvas: domContainer, antialias: true, alpha: true } );
Renderer.clear();
Renderer.setClearColor( 0xeeeeee, 1); // 更改渲染器顏色
Renderer.setSize(domContainer.clientWidth, domContainer.clientHeight);
Renderer.shadowMap.Enabled = true;
Renderer.setPixelRatio(domContainer.devicePixelRatio);
initVR();
}
function initVR() {
// 初始化控制器
Controls = new OrbitControls(Camera, Renderer.domElement);;
Controls.addEventListener('change', render);
Controls.enableZoom = true;
}
function render() {
Renderer.render(Scene, Camera);
}
function renderStart(callback) {
loopID = 0; // 記錄循環(huán)幾次，后面有與清除場景中的物體
if (loopID === -1) return;
let animate = function(){
loopID = requestAnimationFrame(animate);
callback();
Controls.update();
render();
}
animate();
}
// 暫停動(dòng)畫渲染
function renderStop() {
if (loopID !== -1) {
window.cancelAnimationFrame(loopID);
loopID = -1;
}
}
// 回收當(dāng)前場景
function clearScene() {
for(let i = Scene.children.length - 1; i >= 0; i-- ) {
Scene.remove(Scene.children[i]);
}
}
// 清理頁面
function cleanPage() {
renderStop();
clearScene();
}
export {
Scene,
Camera,
Renderer,
Controls,
createScene,
initVR,
renderStart,
renderStop,
clearScene,
cleanPage
}
創(chuàng)建一個(gè)VRpage基類
這是一個(gè)VRpage的基類，所有需要?jiǎng)?chuàng)建Three項(xiàng)目都需要繼承這個(gè)類，然后生成一個(gè)Three項(xiàng)目
// VRpage.js
import * as THREE from 'three';
import * as VRcore from './VRcore.js';
export default class VRpage {
constructor(options) {
// 創(chuàng)建場景
VRcore.createScene(options);
this.start();
this.loadPage();
}
loadPage() {
VRcore.renderStart(() => this.update());
this.loaded();
}
initPage() {
this.loadPage();
this.start();
}
start() {}
loaded() {}
update() {}
}
生成一個(gè)Three.js的項(xiàng)目
下面的文件是一個(gè)繼承了VRpage類的一個(gè)類，然后我們重寫了start方法以及update方法，start方法中我們向場景中添加了一個(gè)正方體，update方法是我們給這個(gè)正方體的一個(gè)變形動(dòng)畫，他會結(jié)合VRcore.js里面的renderStart方法來進(jìn)行動(dòng)畫效果
// page.js
import * as THREE from 'three';
import VRpage from '../../utils/VRpage.js';
import * as VRcore from '../../utils/VRcore.js';
export default class Page extends VRpage {
start() { // 啟動(dòng)渲染之前，創(chuàng)建場景3d模型
let geometry = new THREE.CubeGeometry(100,100,100);
let material = new THREE.MeshLambertMaterial( { color:0x0000ff} );
this.box = new THREE.Mesh(geometry,material);
this.box.position.set(3, -2, -3);
const PointLight = new THREE.PointLight(0xffffff);
PointLight.position.set(500, 500, 500);
const AmbientLight = new THREE.AmbientLight( 0x404040 ); // soft white light
VRcore.Scene.add(PointLight);
VRcore.Scene.add(AmbientLight);
VRcore.Scene.background = new THREE.Color( 0xeeeeee ); // 更改場景背景色
VRcore.Scene.add(this.box);
}
update() {
this.box.rotation.y += 0.01;
}
}
這里我使用的是react的框架
// index.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Page from './Page.js';
class Oho extends Component {
constructor() {
super();
this.init = this.init.bind(this);
}
componentDidMount() {
const dom = document.querySelector('#Oho');
this.init(dom);
}
init(dom) {
const page = new Page({domContainer: dom});
}
render() {
return (
<div className="three-demo">
<canvas id="Oho" ref="camera"></canvas>
</div>
);
}
}
export default Oho;
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript作為一門靈活而強(qiáng)大的語言,提供了代理（Proxy）與反射（Reflect）這兩個(gè)元編程工具,它們?yōu)殚_發(fā)者提供了更深層次的語言控制和操作,在本篇博客中,我們將深入研究代理與反射的概念、用法,以及如何巧妙地結(jié)合它們來實(shí)現(xiàn)高級的編程技巧,需要的朋友可以參考下2023-12-12
JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
js控制滾動(dòng)條緩慢滾動(dòng)到頂部實(shí)現(xiàn)代碼
滾動(dòng)條緩慢滾動(dòng)到頂部這樣的效果想必大家在瀏覽網(wǎng)頁的時(shí)候都有見過吧，本文使用js實(shí)現(xiàn)下，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你2013-03-03
JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加下拉菜單及響應(yīng)鼠標(biāo)事件生成菜單等實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
本文主要介紹了Echart中國地圖更換背景圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
JavaScript的面向?qū)ο?一)...2006-11-11
這篇文章主要為大家詳細(xì)介紹了小程序自定義tabBar組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Three光源Target位置改變光照方向不變的問題解決方法
這篇文章主要為大家介紹了Three光源Target位置改變光照方向不變的問題及解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12