VR开发入门使用Three.js 开发的WebVR demo

使用Three.js，并且参考网上开源的代码，终于实现了第一个VR程序。

在线演示：

https://ritterliu.github.io/WebVR_Demo/

<!DOCTYPE html>
<html>
<head><title>WebVR Demo</title><style>body {width: 100%;height: 100%;background-color: #000;}</style>
</head>
<body><script src="./js/three.min.js"></script><script src="./js/StereoEffect.js"></script><script src="./js/OrbitControls.js"></script><script src="./js/DeviceOrientationControls.js"></script><script src="./js/helvetiker_regular.typeface.js"></script><script>var scene, camera, renderer, effect, element, controls, word = "Ritter's VR World";init();function init() {scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 700);camera.position.set(0, 15, 0);scene.add(camera);renderer = new THREE.WebGLRenderer();element = renderer.domElement;document.body.appendChild(renderer.domElement);effect = new THREE.StereoEffect(renderer);//Handle mouse controlcontrols = new THREE.OrbitControls(camera, renderer.domElement);controls.target.set(camera.position.x + 0.01,camera.position.y,camera.position.z);window.addEventListener('deviceorientation', setDeviceOrientationControls, true);//Create lightvar light = new THREE.PointLight( 0xffffff, 1.2, 0 );light.position.set(0, 50, 0);scene.add(light);// Create floorvar floorTexture = THREE.ImageUtils.loadTexture('img/grass.jpg');floorTexture.wrapS = THREE.RepeatWrapping;floorTexture.wrapT = THREE.RepeatWrapping;floorTexture.repeat = new THREE.Vector2(50, 50);var floorMaterial = new THREE.MeshPhongMaterial({map: floorTexture});var floorGeometry = new THREE.PlaneBufferGeometry(1000, 1000);var floor = new THREE.Mesh(floorGeometry, floorMaterial);floor.rotation.x = -Math.PI / 2;scene.add(floor);// Create boxvar geometry = new THREE.BoxGeometry(6, 6, 6);var material = new THREE.MeshNormalMaterial();var cube = new THREE.Mesh(geometry, material);cube.position.set(-15, 30, 10);scene.add(cube);//Create textvar textGeometry = new THREE.TextGeometry(word, {size: 5,height: 1});var text = new THREE.Mesh(textGeometry, new THREE.MeshBasicMaterial({color: 0xffffff}));text.position.set(15, 15, -25);text.rotation.set(0, 30, 0);scene.add(text);animate();}// Our preferred controls via DeviceOrientationfunction setDeviceOrientationControls(e) {controls = new THREE.DeviceOrientationControls(camera, true);controls.connect();controls.update();window.removeEventListener('deviceorientation', setDeviceOrientationControls, true);}function animate() {requestAnimationFrame(animate);var width = window.innerWidth;var height = window.innerHeight;camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize(width, height);effect.setSize(width, height);camera.updateProjectionMatrix();controls.update();effect.render(scene, camera);}</script>
</body>
</html>

源码下载：

https://github.com/ritterliu/WebVR_Demo

参考文献：

http://threejs.org/docs/

http://mt.sohu.com/20151026/n424132314.shtml

http://www.sitepoint.com/bringing-vr-to-web-google-cardboard-three-js/

VR开发入门使用Three.js 开发的WebVR demo相关推荐

Android开发入门——推箱子游戏开发实战（十二）
绘制游戏局面本文是推箱子游戏程序开发的第七步.系列文章前五篇描述准备工作,故本文编号是(十二).本文讲解如何绘制游戏局面. 本文目标本文讲解如何绘制游戏局面.游戏局面的示例如图1,图2所示.这两幅 ...
以太坊DApp开发入门教程——Node.js和truffle框架打造区块链投票系统
第一节课程概述本课程面向初学者,内容涵盖以太坊开发相关的基本概念,并将手把手地教大家如何构建一个基于以太坊的完整去中心化应用 -- 区块链投票系统. 通过本课程的学习,你将掌握: 以太坊区块链的 ...
spring boot + vue + element-ui全栈开发入门——前后端整合开发
一.配置思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: {'/api ...
python微信开发入门_python tornado微信开发入门代码
本文实例为大家分享了python tornado微信开发的具体代码,供大家参考,具体内容如下 #微信入门代码 #!/usr/bin/env python2.7 # -*- coding: utf-8 ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
嵌入式开发入门之经典 ARM开发板
嵌入式开发入门之经典开始进入嵌入式世界,真是一头雾水,不知道如何入手!也不知道该如何学习,学习什么,最近从网上转载这篇文章,对我启发很大,对于初始进入嵌入式的人们很有帮组,好多嵌入式大侠都说这是入门 ...
Qlik sense开发入门/可视化BI报表开发入门
最近开发公司的BI可视化报表,接触了Qlik报表工具,使用过程中发现网上入门教程很少,因此写一篇入门开发经历.啥也不说,先上一个已经开发完成的需求中的其中一个展示页面截图: 如上图, Qlik这个工具 ...
Jetson Nano开发深度学习实践（一）：《基于NVIDIA...开发入门》在jetson_nano开发中可能会遇到的问题1：安装Protobuf，NVIDIA-caffe和Digits
写在前面 NVIDIA caffe 是NVIDIA维护的caffe的一个分支,有很多便于部署在边缘端的特性,详细信息去NVIDIA的github看吧:https://github.com/NVIDIA ...
Java开发入门教程！java开发架构师职责
什么是Service Mesh 作为Service Mesh技术探索和实践的先行者,全球第一个真正的Service Mesh项目Linkerd负责人.Buoyant公司创始人兼CEO William ...

VR开发入门使用Three.js 开发的WebVR demo

VR开发入门使用Three.js 开发的WebVR demo相关推荐

最新文章

热门文章

VR开发 入门 使用Three.js 开发的WebVR demo

VR开发 入门 使用Three.js 开发的WebVR demo相关推荐

最新文章

热门文章

VR开发入门使用Three.js 开发的WebVR demo

VR开发入门使用Three.js 开发的WebVR demo相关推荐