基于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 (
  <div classname="three-demo">
   <canvas id="oho" ref="camera"></canvas>
  </div>
  );
 }
 }
 export default oho;

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。