这篇文章主要给大家介绍了关于基于three.js编写的一个项目类的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
webvr
在开始之前，先对webvr进行介绍，webvr是一个实验性的javascript api，允许hmd（head-mounted displays）连接到web apps，同时能够接受这些设备的位置和动作信息。这让使用javascript开发vr应用成为可能（当然已经有很多接口api让javascript作为开发语言了，不过这并不影响我们为webvr感到兴奋）。而让我们能够立马进行预览与体验，移动设备上的chrome已经支持了webvr并使手机作为一个简易的hmd。手机可以把屏幕分成左右眼视觉并应用手机中的加速度计、陀螺仪等感应器，你需要做的或许就只是买一个cardboard。下面话不多说了，来一起看看本文的正文：
这是一篇关于怎么样基于three.js进行可配置的three.js的对象创建的文章
项目地址
编写一个three.js的基类
这是创建的一个three.js基类其中包含了场景，相机，渲染器，控制器以及一些方法
// 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; // 记录循环几次，后面有与清除场景中的物体 if (loopid === -1) return; let animate = function(){ loopid = requestanimationframe(animate); callback(); controls.update(); render(); } animate(); } // 暂停动画渲染 function renderstop() { if (loopid !== -1) { window.cancelanimationframe(loopid); loopid = -1; } } // 回收当前场景 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 }
创建一个vrpage基类
这是一个vrpage的基类，所有需要创建three项目都需要继承这个类，然后生成一个three项目
// vrpage.js import * as three from 'three'; import * as vrcore from './vrcore.js'; export default class vrpage { constructor(options) { // 创建场景 vrcore.createscene(options); this.start(); this.loadpage(); } loadpage() { vrcore.renderstart(() => this.update()); this.loaded(); } initpage() { this.loadpage(); this.start(); } start() {} loaded() {} update() {} }
生成一个three.js的项目
下面的文件是一个继承了vrpage类的一个类，然后我们重写了start方法以及update方法，start方法中我们向场景中添加了一个正方体，update方法是我们给这个正方体的一个变形动画，他会结合vrcore.js里面的renderstart方法来进行动画效果
// 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() { // 启动渲染之前，创建场景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 ( <p classname="three-demo"> <canvas id="oho" ref="camera"></canvas> </p> ); } } export default oho;
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
利用js如何实现小球跟随鼠标移动
在vue组件中有关自定义事件（详细教程）
php闭包和匿名函数（详细教程）
在微信小程序中如何使用三级联动选择器
使用jquery如何实现手风琴特效
以上就是使用three.js制作一个项目的详细内容。