Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webvr_vive_paint.html 11.6 KB
Newer Older
M
r81  
Mr.doob 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webvr - htc vive - paint</title>
		<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: #f00;
			}
		</style>
	</head>
	<body>

		<script src="../build/three.js"></script>
M
r82  
Mr.doob 已提交
24 25 26 
		<script src="js/vr/ViveController.js"></script>
		<script src="js/vr/PaintViveController.js"></script>
		<script src="js/vr/WebVR.js"></script>
M
r81  
Mr.doob 已提交
27 28 29 30 31 

		<script src="js/loaders/OBJLoader.js"></script>

		<script>
M
r86  
Mr.doob 已提交
32 
			WEBVR.checkAvailability().catch( function( message ) {
M
r81  
Mr.doob 已提交
33
M
r86  
Mr.doob 已提交
34 
				document.body.appendChild( WEBVR.getMessageContainer( message ) );
M
r81  
Mr.doob 已提交
35
M
r86  
Mr.doob 已提交
36 
			} );
M
r81  
Mr.doob 已提交
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 

			//

			var container;
			var camera, scene, renderer;
			var controller1, controller2;

			var line;
			var shapes = {};

			var up = new THREE.Vector3( 0, 1, 0 );
			var vector = new THREE.Vector3();

			var vector1 = new THREE.Vector3();
			var vector2 = new THREE.Vector3();
			var vector3 = new THREE.Vector3();
			var vector4 = new THREE.Vector3();

			var point4 = new THREE.Vector3();
			var point5 = new THREE.Vector3();

			init();
			initGeometry();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
M
r86  
Mr.doob 已提交
72 
				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - htc vive - paint';
M
r81  
Mr.doob 已提交
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 
				container.appendChild( info );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x222222 );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
				scene.add( camera );

				var geometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
				var material = new THREE.MeshStandardMaterial( {
					color: 0x444444,
					roughness: 1.0,
					metalness: 0.0
				} );
				var table = new THREE.Mesh( geometry, material );
				table.position.y = 0.35;
				table.position.z = 0.85;
				table.castShadow = true;
				table.receiveShadow = true;
				scene.add( table );

				/*
				var table = new THREE.Mesh( geometry, material );
				table.position.y = 0.35;
				table.position.z = -0.85;
				table.castShadow = true;
				table.receiveShadow = true;
				scene.add( table );
				*/

				var geometry = new THREE.PlaneGeometry( 4, 4 );
				var material = new THREE.MeshStandardMaterial( {
					color: 0x222222,
					roughness: 1.0,
					metalness: 0.0
				} );
				var floor = new THREE.Mesh( geometry, material );
				floor.rotation.x = - Math.PI / 2;
				floor.receiveShadow = true;
				scene.add( floor );
M
r84  
Mr.doob 已提交
114 
				scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
M
r81  
Mr.doob 已提交
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 

				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );

				var light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 6, 0 );
				light.castShadow = true;
				light.shadow.camera.top = 2;
				light.shadow.camera.bottom = -2;
				light.shadow.camera.right = 2;
				light.shadow.camera.left = -2;
				light.shadow.mapSize.set( 4096, 4096 );
				scene.add( light );

				// scene.add( new THREE.DirectionalLightHelper( light ) );
				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true;
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				container.appendChild( renderer.domElement );
M
r86  
Mr.doob 已提交
141 142 
				renderer.vr.enabled = true;
				renderer.vr.standing = true;
M
r81  
Mr.doob 已提交
143 144 145 

				// controllers
M
r82  
Mr.doob 已提交
146 
				controller1 = new THREE.PaintViveController( 0 );
M
r86  
Mr.doob 已提交
147 
				controller1.standingMatrix = renderer.vr.getStandingMatrix();
M
r81  
Mr.doob 已提交
148 149 150 151 
				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
				scene.add( controller1 );
M
r82  
Mr.doob 已提交
152 
				controller2 = new THREE.PaintViveController( 1 );
M
r86  
Mr.doob 已提交
153 
				controller2.standingMatrix = renderer.vr.getStandingMatrix();
M
r81  
Mr.doob 已提交
154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 
				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
				scene.add( controller2 );

				var loader = new THREE.OBJLoader();
				loader.setPath( 'models/obj/vive-controller/' );
				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {

					var loader = new THREE.TextureLoader();
					loader.setPath( 'models/obj/vive-controller/' );

					var controller = object.children[ 0 ];
					controller.material.map = loader.load( 'onepointfive_texture.png' );
					controller.material.specularMap = loader.load( 'onepointfive_spec.png' );
					controller.castShadow = true;
					controller.receiveShadow = true;

					// var pivot = new THREE.Group();
					// var pivot = new THREE.Mesh( new THREE.BoxGeometry( 0.01, 0.01, 0.01 ) );
M
r85  
Mr.doob 已提交
173 
					var pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 2 ) );
M
r81  
Mr.doob 已提交
174 175 176 177 178 179 180 
					pivot.name = 'pivot';
					pivot.position.y = -0.016;
					pivot.position.z = -0.043;
					pivot.rotation.x = Math.PI / 5.5;
					controller.add( pivot );

					controller1.add( controller.clone() );
M
r82  
Mr.doob 已提交
181 182 

					pivot.material = pivot.material.clone();
M
r81  
Mr.doob 已提交
183 184 185 186 
					controller2.add( controller.clone() );

				} );
M
r85  
Mr.doob 已提交
187 
				WEBVR.getVRDisplay( function ( display ) {
M
r81  
Mr.doob 已提交
188
M
r86  
Mr.doob 已提交
189 190 
					renderer.vr.setDevice( display );
M
r85  
Mr.doob 已提交
191 
					document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
M
r81  
Mr.doob 已提交
192
M
r85  
Mr.doob 已提交
193 
				} );
M
r81  
Mr.doob 已提交
194 195 196 197 198 199 200 201 202 203 204 205 

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function initGeometry() {

				var geometry = new THREE.BufferGeometry();

				var positions = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
M
r82  
Mr.doob 已提交
206 
				positions.dynamic = true;
M
r81  
Mr.doob 已提交
207 208 209 
				geometry.addAttribute( 'position', positions );

				var normals = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
M
r82  
Mr.doob 已提交
210 
				normals.dynamic = true;
M
r81  
Mr.doob 已提交
211 212 213 
				geometry.addAttribute( 'normal', normals );

				var colors = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
M
r82  
Mr.doob 已提交
214 
				colors.dynamic = true;
M
r81  
Mr.doob 已提交
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 
				geometry.addAttribute( 'color', colors );

				geometry.drawRange.count = 0;

				//

				/*
				var path = "textures/cube/SwedishRoyalCastle/";
				var format = '.jpg';
				var urls = [
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];

				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
				*/

				var material = new THREE.MeshStandardMaterial( {
					roughness: 0.9,
					metalness: 0.0,
					// envMap: reflectionCube,
					vertexColors: THREE.VertexColors,
					side: THREE.DoubleSide
				} );

				line = new THREE.Mesh( geometry, material );
				line.frustumCulled = false;
				line.castShadow = true;
				line.receiveShadow = true;
				scene.add( line );

				// Shapes
M
r85  
Mr.doob 已提交
248 249 250 251 
				shapes[ 'tube' ] = getTubeShapes(1.0);
			}

			function getTubeShapes(size) {
M
r81  
Mr.doob 已提交
252 253 254 255 256 

				var PI2 = Math.PI * 2;

				var sides = 10;
				var array = [];
M
r85  
Mr.doob 已提交
257 258 
				var radius = 0.01 * size;
				for( var i = 0; i < sides; i ++ ){
M
r81  
Mr.doob 已提交
259 260 

					var angle = ( i / sides ) * PI2;
M
r85  
Mr.doob 已提交
261 
					array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
M
r81  
Mr.doob 已提交
262 263 
				}
M
r85  
Mr.doob 已提交
264 
				return array;
M
r81  
Mr.doob 已提交
265 266 
			}
M
r85  
Mr.doob 已提交
267
M
r82  
Mr.doob 已提交
268 269 270 
			function stroke( controller, point1, point2, matrix1, matrix2 ) {

				var color = controller.getColor();
M
r81  
Mr.doob 已提交
271
M
r85  
Mr.doob 已提交
272 
				var shapes = getTubeShapes( controller.getSize() );
M
r81  
Mr.doob 已提交
273 274 275 276 277 278 279 280 281 

				var geometry = line.geometry;
				var attributes = geometry.attributes;
				var count = geometry.drawRange.count;

				var positions = attributes.position.array;
				var normals = attributes.normal.array;
				var colors = attributes.color.array;
M
r85  
Mr.doob 已提交
282 
				for ( var j = 0, jl = shapes.length; j < jl; j ++ ) {
M
r81  
Mr.doob 已提交
283
M
r85  
Mr.doob 已提交
284 285 
					var vertex1 = shapes[ j ];
					var vertex2 = shapes[ ( j + 1 ) % jl ];
M
r81  
Mr.doob 已提交
286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 

					// positions

					vector1.copy( vertex1 );
					vector1.applyMatrix4( matrix2 );
					vector1.add( point2 );

					vector2.copy( vertex2 );
					vector2.applyMatrix4( matrix2 );
					vector2.add( point2 );

					vector3.copy( vertex2 );
					vector3.applyMatrix4( matrix1 );
					vector3.add( point1 );

					vector4.copy( vertex1 );
					vector4.applyMatrix4( matrix1 );
					vector4.add( point1 );

					vector1.toArray( positions, ( count + 0 ) * 3 );
					vector2.toArray( positions, ( count + 1 ) * 3 );
					vector4.toArray( positions, ( count + 2 ) * 3 );

					vector2.toArray( positions, ( count + 3 ) * 3 );
					vector3.toArray( positions, ( count + 4 ) * 3 );
					vector4.toArray( positions, ( count + 5 ) * 3 );

					// normals

					vector1.copy( vertex1 );
					vector1.applyMatrix4( matrix2 );
					vector1.normalize();

					vector2.copy( vertex2 );
					vector2.applyMatrix4( matrix2 );
					vector2.normalize();

					vector3.copy( vertex2 );
					vector3.applyMatrix4( matrix1 );
					vector3.normalize();

					vector4.copy( vertex1 );
					vector4.applyMatrix4( matrix1 );
					vector4.normalize();

					vector1.toArray( normals, ( count + 0 ) * 3 );
					vector2.toArray( normals, ( count + 1 ) * 3 );
					vector4.toArray( normals, ( count + 2 ) * 3 );

					vector2.toArray( normals, ( count + 3 ) * 3 );
					vector3.toArray( normals, ( count + 4 ) * 3 );
					vector4.toArray( normals, ( count + 5 ) * 3 );

					// colors

					color.toArray( colors, ( count + 0 ) * 3 );
					color.toArray( colors, ( count + 1 ) * 3 );
					color.toArray( colors, ( count + 2 ) * 3 );

					color.toArray( colors, ( count + 3 ) * 3 );
					color.toArray( colors, ( count + 4 ) * 3 );
					color.toArray( colors, ( count + 5 ) * 3 );

					count += 6;

				}

				geometry.drawRange.count = count;
M
r82  
Mr.doob 已提交
354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 

			}

			function updateGeometry( start, end ) {

				if ( start === end ) return;

				var offset = start * 3;
				var count = ( end - start ) * 3;

				var geometry = line.geometry;
				var attributes = geometry.attributes;

				attributes.position.updateRange.offset = offset;
				attributes.position.updateRange.count = count;
M
r81  
Mr.doob 已提交
369 
				attributes.position.needsUpdate = true;
M
r82  
Mr.doob 已提交
370 371 372 

				attributes.normal.updateRange.offset = offset;
				attributes.normal.updateRange.count = count;
M
r81  
Mr.doob 已提交
373 
				attributes.normal.needsUpdate = true;
M
r82  
Mr.doob 已提交
374 375 376 

				attributes.color.updateRange.offset = offset;
				attributes.color.updateRange.count = count;
M
r81  
Mr.doob 已提交
377 378 379 380 381 382 383 384 385 
				attributes.color.needsUpdate = true;

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
M
r86  
Mr.doob 已提交
386 
				renderer.setSize( window.innerWidth, window.innerHeight );
M
r81  
Mr.doob 已提交
387 388 389 390 391 

			}

			//
M
r82  
Mr.doob 已提交
392 
			function handleController( controller ) {
M
r81  
Mr.doob 已提交
393 394 395 396 397 398 399 

				controller.update();

				var pivot = controller.getObjectByName( 'pivot' );

				if ( pivot ) {
M
r82  
Mr.doob 已提交
400 
					pivot.material.color.copy( controller.getColor() );
M
r85  
Mr.doob 已提交
401 
					pivot.scale.setScalar(controller.getSize());
M
r82  
Mr.doob 已提交
402
M
r81  
Mr.doob 已提交
403 404 405 406 407 408 409 410 411 412 413 414 415 
					var matrix = pivot.matrixWorld;

					var point1 = controller.userData.points[ 0 ];
					var point2 = controller.userData.points[ 1 ];

					var matrix1 = controller.userData.matrices[ 0 ];
					var matrix2 = controller.userData.matrices[ 1 ];

					point1.setFromMatrixPosition( matrix );
					matrix1.lookAt( point2, point1, up );

					if ( controller.getButtonState( 'trigger' ) ) {
M
r82  
Mr.doob 已提交
416 
						stroke( controller, point1, point2, matrix1, matrix2 );
M
r81  
Mr.doob 已提交
417 418 419 420 421 422 423 424 425 426 

					}

					point2.copy( point1 );
					matrix2.copy( matrix1 );

				}

			}
M
r86  
Mr.doob 已提交
427 428 429 
			function animate() {

				renderer.animate( render );
M
r81  
Mr.doob 已提交
430
M
r86  
Mr.doob 已提交
431 432 433 
			}

			function render() {
M
r81  
Mr.doob 已提交
434
M
r82  
Mr.doob 已提交
435 436 437 438 439 440 
				var count = line.geometry.drawRange.count;

				handleController( controller1 );
				handleController( controller2 );

				updateGeometry( count, line.geometry.drawRange.count );
M
r81  
Mr.doob 已提交
441
M
r86  
Mr.doob 已提交
442 
				renderer.render( scene, camera );
M
r81  
Mr.doob 已提交
443 444 445 446 447 448 

			}

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