基于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几个不错的函数 $$()
Oct 09 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
关于JavaScript回调函数的深入理解
Jun 27 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
实用函数8
2007/11/08 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python将多个excel文件合并为一个文件
2018/01/03 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python中的print()输出
2019/04/12 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
竞聘上岗演讲稿
2014/05/16 职场文书
步步惊心观后感
2015/06/12 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
python画条形图的具体代码
2022/04/20 Python