没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
基于基于three.js编写的一个项目类示例代码编写的一个项目类示例代码
主要给大家介绍了关于基于three.js编写的一个项目类的相关资料,文中通过示例代码介绍的非常详细,对大家
的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
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]);
资源评论
weixin_38644097
- 粉丝: 4
- 资源: 923
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- TG-2024-05-23-204718255.mp4
- 候志强@181 5428 8938_20240420112107.amr
- spispispispispi
- 实验二:IP协议分析.zip
- 驱动代码驱动代码驱动代码驱动代码
- SVID_20240523_141155_1.mp4
- Code for the complete guide to tkinter tutorial
- 关于百货中心供应链管理系统.zip
- SimpleFolderIcon-master 修改Unity的Project下的文件夹图标
- A python Tkinter widget to display tile based maps
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功