基于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 相关文章推荐
详解jquery uploadify 上传文件
Nov 09 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
vue登录路由验证的实现
Dec 13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
Openlayers实现地图的基本操作
Sep 28 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中过滤非法字符的具体实现
2013/10/29 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python操作redis数据库的三种方法
2020/09/10 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
解释下面关于J2EE的名词
2013/11/15 面试题
自我推荐书
2013/12/04 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle