基于three.js编写的一个项目类示例代码


Posted in Javascript onJanuary 05, 2018

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;

总结

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

Javascript 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
js中this对象用法分析
Jan 05 #Javascript
Node中使用ES6语法的基础教程
Jan 05 #Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php通过session防url攻击方法
2014/12/10 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
vuex 的简单使用
2018/03/22 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python新手学习raise用法
2020/06/03 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
自我评价如何写好?
2014/01/05 职场文书
策划创业计划书
2014/02/06 职场文书
仓库文员岗位职责
2014/04/06 职场文书
导游词之张家口
2019/12/13 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
浅析Python实现DFA算法
2021/06/26 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
DIY胆机必读:各国电子管评价
2022/04/06 无线电