基于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 相关文章推荐
JavaScript的漂亮的代码片段
Jun 05 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
工作中常用js功能汇总
Nov 07 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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/01/19 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php数组添加元素方法小结
2014/12/20 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python函数学习笔记
2008/10/07 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
综合素质的自我鉴定
2013/10/07 职场文书
夜大自我鉴定
2013/10/31 职场文书
小学毕业寄语大全
2014/04/03 职场文书
监理中标通知书
2015/04/16 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Apache POI的基本使用详解
2021/11/07 Servers
方法汇总:Python 安装第三方库常用
2022/04/26 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis