您的位置：首页 > Web前端 > JavaScript

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

2017-03-19 20:10 711 查看

使用Three.js，并且参考网上开源的代码，终于实现了第一个VR程序。
在线演示：
https://ritterliu.github.io/WebVR_Demo/

[html]
view plain
copy

<!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- href="http://lib.csdn.net/base/vr" target=_blank>VR-to-web-google-cardboard-three-js/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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