VR開發 入門 使用Three.js 開發的WebVR demo
阿新 • • 發佈：2019-02-14
使用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/