介绍,//VRcore.js
,import *, as THREE 得到& # 39;3 # 39;;
,const OrbitControls =,要求(& # 39;three-orbit-controls& # 39;)(三)
,let 场景,相机,,渲染器,,控制,loopID;
,function createScene ({domContainer =, document.body,, fov =, 50岁,far =, 1000}) {
,if (! (domContainer instanceof HTMLElement)), {
throw 才能;new 错误(& # 39;domContainer is not a HTMLElement ! & # 39;);
,}
,//初始化,场景=,,Scene new THREE.Scene ();
,//初始化,相机=,,Camera new THREE.PerspectiveCamera (fov, domContainer.clientWidth /, domContainer.clientHeight,, 1,,远);
,Camera.position.set (, 200,, 200,, 200,);
,Camera.lookAt (Scene.position);
,Scene.add(相机);
,//初始化,渲染器=,,Renderer new THREE.WebGLRenderer({,画布:domContainer,,平滑,,真的,,α:,true },);
,Renderer.clear ();
,Renderer.setClearColor (0 xeeeeee大敌;1);,//,更改渲染器颜色
,Renderer.setSize (domContainer.clientWidth, domContainer.clientHeight);=,Renderer.shadowMap.Enabled 真实;
,Renderer.setPixelRatio (domContainer.devicePixelRatio);
,initVR ();
,}
,function initVR (), {//才能,初始化控制器
Controls 才能=,new OrbitControls(相机,,Renderer.domElement);;
Controls.addEventListener才能(& # 39;改变# 39;,,渲染);
Controls.enableZoom =,才能正确;
,}
,function 使(),{
,Renderer.render(场景,相机);
,}
,function renderStart(回调),{=,loopID 0;,//,记录循环几次,后面有与清除场景中的物体
,if (loopID ===, 1),返回;
,let animate =,函数(){
时间=loopID 才能;requestAnimationFrame(动画);
,,回调();
Controls.update才能();
渲染才能();
,}
,动画();
,}
,//暂停动画渲染
,function renderStop (), {
,if (loopID !==, 1), {
window.cancelAnimationFrame才能(loopID);
时间=loopID 才能;1;
,}
,}
,//回收当前场景
,function clearScene (), {
,(let 小姐:=,Scene.children.length 作用;1;,小姐:祝辞=,0;,我——,),{
Scene.remove才能(Scene.children[我]);
,}
,}
,//清理页面
,function cleanPage (), {
,renderStop ();
,clearScene ();
,}
,export {
,现场,
,相机,
渲染器,
,控制,
createScene,
initVR,
renderStart,
renderStop,
clearScene,
,cleanPage
以前,} ,//VRpage.js
,import *, as THREE 得到& # 39;3 # 39;;
,import *, as VRcore 得到& # 39;。/VRcore.js& # 39;;
,export default class VRpage {
,构造函数(选项){//,才能创建场景
VRcore.createScene才能(选项);
this.start才能();
this.loadPage才能();
,}
,loadPage (), {
VRcore.renderStart才能((),=祝辞,this.update ());
this.loaded才能();
,}
,initPage () {
this.loadPage才能();
this.start才能();
,}
,开始(){}
,加载(){}
,更新(){}
以前,} ,//page.js
,import *, as THREE 得到& # 39;3 # 39;;
,import VRpage 得到& # 39;. ./. ./跑龙套VRpage.js& # 39;;
,import *, as VRcore 得到& # 39;. ./. ./跑龙套VRcore.js& # 39;;
,export default class Page extends VRpage {
,开始(){//大敌;启动渲染之前,创建场景三维模型
let 才能;geometry =, new THREE.CubeGeometry (100100100);
let 才能;material =, new THREE.MeshLambertMaterial(,{,颜色:0 x0000ff},);
时间=this.box 才能;new THREE.Mesh(几何、材料);
this.box.position.set才能(3,,2,,3);
const 才能;PointLight =, new THREE.PointLight (0 xffffff);
PointLight.position.set才能(500,,500,,500);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家介绍使用three.js怎么编写一个项目类,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>编写一个three.js的基类
创建的一个三人。js基类其中包含了场景,相机,渲染器,控制器以及一些方法
<强>创建一个VRpage基类
这是一个VRpage的基类,所有需要创建三个项目都需要继承这个类,然后生成一个3项目
<强>生成一个Three.js的项目
下面的文件是一个继承了VRpage类的一个类,然后我们重写了开始方法以及更新方法,开始方法中我们向场景中添加了一个正方体,更新方法是我们给这个正方体的一个变形动画,他会结合VRcore。js里面的renderStart方法来进行动画效果
