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

来源：互联网发布：青岛淘宝美工招聘信息编辑：程序博客网时间：2024/05/16 15:04

使用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 control    controls = 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 light    var light = new THREE.PointLight( 0xffffff, 1.2, 0 );    light.position.set(0, 50, 0);    scene.add(light);    // Create floor    var 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 box    var 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 text    var 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 DeviceOrientation  function 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/

1 0

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

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