基于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实现检测指定目录是否存在的方法
Jan 12 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
解析strtr函数的效率问题
2013/06/26 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python set常用操作函数集锦
2017/11/15 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python pygame实现五子棋小游戏
2020/10/26 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python和js交互调用的方法
2020/06/23 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
《小小雨点》教学反思
2014/02/18 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
调研报告的主要写法
2019/04/18 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers