Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 39dac1b6 编写于 作者: M Mr.doob
浏览文件
操作

Updated webvr examples to latest API

上级 bf2b9c2f
隐藏空白更改
内联 并排
Showing with 96 addition and 147 deletion
examples/webvr_cubes.html
浏览文件 @ 39dac1b6
......@@ -23,8 +23,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
......@@ -41,7 +39,6 @@
var container;
var camera, scene, raycaster, renderer;
var effect, controls;
var room;
var isMouseDown = false;
......@@ -129,11 +126,12 @@
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
renderer.vr.enabled = true;
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -166,7 +164,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
......@@ -174,8 +172,7 @@
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
......@@ -261,8 +258,7 @@
}
controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_daydream.html
浏览文件 @ 39dac1b6
......@@ -47,6 +47,7 @@
var INTERSECTED;
init();
animate();
function init() {
......@@ -118,7 +119,6 @@
container.appendChild( renderer.domElement );
renderer.vr.enabled = true;
renderer.animate( update );
//
......@@ -164,15 +164,16 @@
//
function update() {
function animate() {
gamepad.update();
render();
renderer.animate( render );
}
function render() {
gamepad.update();
var delta = clock.getDelta() * 60;
// find intersections
......
examples/webvr_panorama.html
浏览文件 @ 39dac1b6
......@@ -19,8 +19,6 @@
<body>
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
......@@ -34,7 +32,6 @@
//
var camera;
var effect, controls;
var renderer;
var scene;
......@@ -48,16 +45,17 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.vr.enabled = true;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.layers.enable( 1 );
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -137,17 +135,19 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
controls.update();
renderer.animate( render );
}
effect.render( scene, camera );
function render() {
effect.requestAnimationFrame( animate );
renderer.render( scene, camera );
}
......
examples/webvr_rollercoaster.html
浏览文件 @ 39dac1b6
......@@ -25,8 +25,6 @@
<script src="js/RollerCoaster.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
......@@ -45,6 +43,8 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.vr.enabled = true;
var scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
......@@ -186,11 +186,10 @@
//
var controls = new THREE.VRControls( camera );
var effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -202,7 +201,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
......@@ -218,10 +217,9 @@
var prevTime = performance.now();
function animate( time ) {
effect.requestAnimationFrame( animate );
function render() {
var time = performance.now();
var delta = time - prevTime;
for ( var i = 0; i < funfairs.length; i ++ ) {
......@@ -249,15 +247,13 @@
//
controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );
prevTime = time;
}
effect.requestAnimationFrame( animate );
renderer.animate( render );
</script>
......
examples/webvr_sandbox.html
浏览文件 @ 39dac1b6
......@@ -17,8 +17,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script src="js/Mirror.js"></script>
......@@ -34,7 +32,6 @@
//
var camera, scene, renderer;
var effect, controls;
var mirror;
......@@ -114,13 +111,14 @@
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
//
renderer.vr.enabled = true;
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
//
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -136,14 +134,13 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
......@@ -154,9 +151,7 @@
mesh.rotation.x = time * 2;
mesh.rotation.y = time * 5;
controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_video.html
浏览文件 @ 39dac1b6
......@@ -34,8 +34,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
......@@ -51,8 +49,6 @@
var camera, scene, renderer;
var video, texture;
var controls, effect;
init();
animate();
......@@ -142,16 +138,14 @@
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
controls = new THREE.VRControls( camera );
renderer.vr.enabled = true;
effect = new THREE.VREffect( renderer );
effect.scale = 0; // video doesn't need eye separation
effect.setSize( window.innerWidth, window.innerHeight );
//
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -168,22 +162,19 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
function render() {
controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_vive.html
浏览文件 @ 39dac1b6
......@@ -21,8 +21,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/ViveController.js"></script>
<script src="js/vr/WebVR.js"></script>
......@@ -42,7 +40,6 @@
var container;
var camera, scene, renderer;
var effect, controls;
var controller1, controller2;
var room;
......@@ -165,17 +162,17 @@
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
controls.standing = true;
renderer.vr.enabled = true;
renderer.vr.standing = true;
// controllers
controller1 = new THREE.ViveController( 0 );
controller1.standingMatrix = controls.getStandingMatrix();
controller1.standingMatrix = renderer.vr.getStandingMatrix();
scene.add( controller1 );
controller2 = new THREE.ViveController( 1 );
controller2.standingMatrix = controls.getStandingMatrix();
controller2.standingMatrix = renderer.vr.getStandingMatrix();
scene.add( controller2 );
var loader = new THREE.OBJLoader();
......@@ -194,10 +191,10 @@
} );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -213,19 +210,18 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
//
function render() {
var delta = clock.getDelta() * 60;
......@@ -233,8 +229,6 @@
controller1.update();
controller2.update();
controls.update();
for ( var i = 0; i < room.children.length; i ++ ) {
var cube = room.children[ i ];
......@@ -268,7 +262,7 @@
}
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_vive_camerarig.html
浏览文件 @ 39dac1b6
......@@ -21,8 +21,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/ViveController.js"></script>
<script src="js/vr/WebVR.js"></script>
......@@ -42,7 +40,6 @@
var container;
var cameraRig, camera, scene, renderer;
var effect, controls;
var controller1, controller2;
var scale = 1;
var dragging = {
......@@ -174,19 +171,19 @@
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
controls.standing = true;
renderer.vr.enabled = true;
renderer.vr.standing = true;
// controllers
controller1 = new THREE.ViveController( 0 );
controller1.standingMatrix = controls.getStandingMatrix();
controller1.standingMatrix = renderer.vr.getStandingMatrix();
controller1.addEventListener( 'triggerdown', onTriggerDown );
controller1.addEventListener( 'triggerup', onTriggerUp );
cameraRig.add( controller1 );
controller2 = new THREE.ViveController( 1 );
controller2.standingMatrix = controls.getStandingMatrix();
controller2.standingMatrix = renderer.vr.getStandingMatrix();
controller2.addEventListener( 'triggerdown', onTriggerDown );
controller2.addEventListener( 'triggerup', onTriggerUp );
cameraRig.add( controller2 );
......@@ -207,10 +204,10 @@
} );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -226,7 +223,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
......@@ -234,8 +231,7 @@
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
......@@ -246,8 +242,6 @@
controller1.update();
controller2.update();
controls.update();
scaleUpdate();
for ( var i = 0; i < room.children.length; i ++ ) {
......@@ -283,7 +277,7 @@
}
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_vive_dragging.html
浏览文件 @ 39dac1b6
......@@ -21,8 +21,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/ViveController.js"></script>
<script src="js/vr/WebVR.js"></script>
......@@ -40,7 +38,6 @@
var container;
var camera, scene, renderer;
var effect, controls;
var controller1, controller2;
var raycaster, intersected = [];
......@@ -142,19 +139,19 @@
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
controls.standing = true;
renderer.vr.enabled = true;
renderer.vr.standing = true;
// controllers
controller1 = new THREE.ViveController( 0 );
controller1.standingMatrix = controls.getStandingMatrix();
controller1.standingMatrix = renderer.vr.getStandingMatrix();
controller1.addEventListener( 'triggerdown', onTriggerDown );
controller1.addEventListener( 'triggerup', onTriggerUp );
scene.add( controller1 );
controller2 = new THREE.ViveController( 1 );
controller2.standingMatrix = controls.getStandingMatrix();
controller2.standingMatrix = renderer.vr.getStandingMatrix();
controller2.addEventListener( 'triggerdown', onTriggerDown );
controller2.addEventListener( 'triggerup', onTriggerUp );
scene.add( controller2 );
......@@ -193,10 +190,10 @@
//
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -212,7 +209,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
......@@ -312,8 +309,7 @@
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
......@@ -322,14 +318,12 @@
controller1.update();
controller2.update();
controls.update();
cleanIntersected();
intersectObjects( controller1 );
intersectObjects( controller2 );
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_vive_paint.html
浏览文件 @ 39dac1b6
......@@ -21,8 +21,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/ViveController.js"></script>
<script src="js/vr/PaintViveController.js"></script>
<script src="js/vr/WebVR.js"></script>
......@@ -41,7 +39,6 @@
var container;
var camera, scene, renderer;
var effect, controls;
var controller1, controller2;
var line;
......@@ -142,19 +139,19 @@
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
controls.standing = true;
renderer.vr.enabled = true;
renderer.vr.standing = true;
// controllers
controller1 = new THREE.PaintViveController( 0 );
controller1.standingMatrix = controls.getStandingMatrix();
controller1.standingMatrix = renderer.vr.getStandingMatrix();
controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
scene.add( controller1 );
controller2 = new THREE.PaintViveController( 1 );
controller2.standingMatrix = controls.getStandingMatrix();
controller2.standingMatrix = renderer.vr.getStandingMatrix();
controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
scene.add( controller2 );
......@@ -188,10 +185,10 @@
} );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -387,19 +384,12 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
effect.requestAnimationFrame( animate );
render();
}
function handleController( controller ) {
controller.update();
......@@ -435,9 +425,13 @@
}
function render() {
function animate() {
renderer.animate( render );
controls.update();
}
function render() {
var count = line.geometry.drawRange.count;
......@@ -446,7 +440,7 @@
updateGeometry( count, line.geometry.drawRange.count );
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
examples/webvr_vive_sculpt.html
浏览文件 @ 39dac1b6
......@@ -21,8 +21,6 @@
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/ViveController.js"></script>
<script src="js/vr/WebVR.js"></script>
......@@ -41,7 +39,6 @@
var container;
var camera, scene, renderer;
var effect, controls;
var controller1, controller2;
var blob, vector;
......@@ -124,17 +121,17 @@
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
controls.standing = true;
renderer.vr.enabled = true;
renderer.vr.standing = true;
// controllers
controller1 = new THREE.ViveController( 0 );
controller1.standingMatrix = controls.getStandingMatrix();
controller1.standingMatrix = renderer.vr.getStandingMatrix();
scene.add( controller1 );
controller2 = new THREE.ViveController( 1 );
controller2.standingMatrix = controls.getStandingMatrix();
controller2.standingMatrix = renderer.vr.getStandingMatrix();
scene.add( controller2 );
var loader = new THREE.OBJLoader();
......@@ -166,10 +163,10 @@
} );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
renderer.vr.setDevice( display );
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
......@@ -223,7 +220,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
......@@ -231,8 +228,7 @@
function animate() {
effect.requestAnimationFrame( animate );
render();
renderer.animate( render );
}
......@@ -329,9 +325,7 @@
updateBlob();
controls.update();
effect.render( scene, camera );
renderer.render( scene, camera );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或