Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webxr_vr_multiview.html 5.6 KB
Newer Older
F
Add webvr_multiview example  
Fernando Serrano 已提交
1 2 3 
<!DOCTYPE html>
<html lang="en">
	<head>
M
Examples: Clean up.  
Mr.doob 已提交
4 
		<title>three.js vr - multiview</title>
F
Add webvr_multiview example  
Fernando Serrano 已提交
5 6 7 8 9 10 11 12 13 14 15 16 17 18 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style>
			body {
				font-family: Monospace;
				background-color: #101010;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			a {
				color: #48f;
			}
		</style>
M
WebXR: Update origin trials token.  
Mugen87 已提交
19 20 
		<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
		<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
F
Add webvr_multiview example  
Fernando Serrano 已提交
21 22 
	</head>
	<body>
F
Change webvr_multiview to use modules  
Fernando Serrano 已提交
23 
		<script type="module">
F
Add webvr_multiview example  
Fernando Serrano 已提交
24
F
Change webvr_multiview to use modules  
Fernando Serrano 已提交
25 26 
			import * as THREE from '../build/three.module.js';
			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
M
Examples: Deprecated WebVR.js and added VRButton.js  
Mr.doob 已提交
27 
			import { VRButton } from './jsm/webxr/VRButton.js';
F
Change webvr_multiview to use modules  
Fernando Serrano 已提交
28 
			import Stats from './jsm/libs/stats.module.js';
F
Add webvr_multiview example  
Fernando Serrano 已提交
29 30 31 32 33 

			var container;
			var camera, scene, renderer;

			var room;
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
34 
			var stats;
F
Add webvr_multiview example  
Fernando Serrano 已提交
35
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
36 
			var radius = 0.02;
F
Add webvr_multiview example  
Fernando Serrano 已提交
37 38 39 40 41 42 43 44 45 46 47 

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
48 49 50 
				//

				var canvas = document.createElement( 'canvas' );
F
Added comment to explain the requirements for OVR_multiview2 and text indicating if it's available  
Fernando Serrano 已提交
51 52 53 54 55 56 57 58 59 60 


				// Currently OVR_multiview2 is supported just on WebGL2 non-multisampled contexts
				// so we must create the context manually ensuring `antialias` is set to false
				//
				// There is an ongoing discussion on how to add multisampled multiview support
				// on the Khronos Group's WebGL repo: https://github.com/KhronosGroup/WebGL/issues/2912
				// as soon as that will get solved we will update the code so it will be
				// transparent for the user and you could use this extension with or without multisampled
				// contexts
T
Add xrCompatible:true attribute to canvas.getContext() in multiview example  
Takahiro 已提交
61 
				var context = canvas.getContext( 'webgl2', { antialias: false, xrCompatible: true } );
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
62 63 64 65 66 67 68 69 

				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.vr.enabled = true;
				container.appendChild( renderer.domElement );
F
Add webvr_multiview example  
Fernando Serrano 已提交
70 71 72 73 74 
				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
M
Examples: Clean up.  
Mr.doob 已提交
75 
				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - multiview<br/>';
M
Examples: Removed renderer.capabilities.multiview usage in webvr_multiview.  
Mr.doob 已提交
76 
				info.innerHTML += renderer.extensions.get( 'OVR_multiview2' ) ? `<span style="color: #33ff33"><b>OVR_multiview2</b> is supported in your browser</span>` :
F
Added comment to explain the requirements for OVR_multiview2 and text indicating if it's available  
Fernando Serrano 已提交
77 78 
					`<span style="color: #ff3333"><b>OVR_multiview2</b> is not supported or enabled in your browser</span>`;
F
Add webvr_multiview example  
Fernando Serrano 已提交
79 80 81 82 83 
				container.appendChild( info );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x505050 );
M
Improved initial camera in VR examples.  
Mr.doob 已提交
84 85 
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				camera.position.set( 0, 1.6, 3 );
F
Add webvr_multiview example  
Fernando Serrano 已提交
86 87 

				room = new THREE.LineSegments(
F
Change webvr_multiview to use modules  
Fernando Serrano 已提交
88 
					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
M
Examples: Removed renderer.capabilities.multiview usage in webvr_multiview.  
Mr.doob 已提交
89 
					new THREE.LineBasicMaterial( { color: renderer.extensions.get( 'OVR_multiview2' ) ? 0x99ff99 : 0xff3333 } )
F
Add webvr_multiview example  
Fernando Serrano 已提交
90 91 92 93 94 95 96 97 98 99 
				);
				room.geometry.translate( 0, 3, 0 );
				scene.add( room );

				var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
				light.position.set( 1, 1, 1 );
				scene.add( light );

				var geometry = new THREE.IcosahedronBufferGeometry( radius );
F
Change webvr_multiview to use modules  
Fernando Serrano 已提交
100 
				for ( var i = 0; i < 2000; i ++ ) {
F
Add webvr_multiview example  
Fernando Serrano 已提交
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 

					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

					object.position.x = Math.random() * 4 - 2;
					object.position.y = Math.random() * 4;
					object.position.z = Math.random() * 4 - 2;

					object.userData.velocity = new THREE.Vector3();
					object.userData.velocity.x = 2 * Math.random() - 1;
					object.userData.velocity.y = 2 * Math.random() - 1;
					object.userData.velocity.z = 2 * Math.random() - 1;

					room.add( object );

				}

				//
M
Examples: Deprecated WebVR.js and added VRButton.js  
Mr.doob 已提交
119 
				document.body.appendChild( VRButton.createButton( renderer ) );
F
Add webvr_multiview example  
Fernando Serrano 已提交
120 121 122 

				//
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
123 124 125 
				stats = new Stats();
				container.appendChild( stats.dom );
F
Add webvr_multiview example  
Fernando Serrano 已提交
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				renderer.setAnimationLoop( render );

			}

			function render() {

				//
F
Detect antialias on multiview.isAvailable()  
Fernando Serrano 已提交
150 
				stats.update();
F
Add webvr_multiview example  
Fernando Serrano 已提交
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 

				var delta = clock.getDelta();

				var range = 3 - radius;

				for ( var i = 0; i < room.children.length; i ++ ) {

					var object = room.children[ i ];

					object.position.x += object.userData.velocity.x * delta;
					object.position.y += object.userData.velocity.y * delta;
					object.position.z += object.userData.velocity.z * delta;

					// keep objects inside room

					if ( object.position.x < - range || object.position.x > range ) {

						object.position.x = THREE.Math.clamp( object.position.x, - range, range );
						object.userData.velocity.x = - object.userData.velocity.x;

					}

					if ( object.position.y < radius || object.position.y > 6 ) {

						object.position.y = Math.max( object.position.y, radius );
						object.userData.velocity.y = - object.userData.velocity.y;

					}

					if ( object.position.z < - range || object.position.z > range ) {

						object.position.z = THREE.Math.clamp( object.position.z, - range, range );
						object.userData.velocity.z = - object.userData.velocity.z;

					}

				}

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>