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

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

2016-05-12 19:51 1056 查看

使用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/

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

标签： vr three.js webvr

相关文章推荐

新的分享

章节导航

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

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