Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webvr_sculpt.html 6.2 KB
Newer Older
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
1 2 3 4 5 6 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webvr - sculpt</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
M
Examples: Unified CSS.  
Mr.doob 已提交
7 
		<link type="text/css" rel="stylesheet" href="main.css">
M
WebXR: Update origin trials token.  
Mugen87 已提交
8 9 
		<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
		<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
10 11 12 
	</head>
	<body>
M
Examples: Unified CSS.  
Mr.doob 已提交
13 14 15 16 
		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - sculpt
		</div>
M
Final working version of the Polyfill  
Morgan Villedieu 已提交
17 
		<script src="js/vr/HelioWebXRPolyfill.js"></script>
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
18
M
Examples: More module examples.  
Mugen87 已提交
19 
		<script type="module">
M
Examples: Added padding after script tag.  
Mr.doob 已提交
20
M
Examples: Bring namespace back.  
Mr.doob 已提交
21 
			import * as THREE from '../build/three.module.js';
M
Examples: More module examples.  
Mugen87 已提交
22 23 

			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
M
JSM: Added module and TS file for WebVR.  
Mugen87 已提交
24 
			import { WEBVR } from './jsm/vr/WebVR.js';
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
25 26 27 28 29 

			var container;
			var camera, scene, renderer;
			var controller1, controller2;
L
Fix linter errors  
Lewy Blue 已提交
30 
			var blob;
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
31 32 33 34 35 36 37 38 39 40 41 42 

			var points = [];

			init();
			initBlob();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );
M
Examples: Bring namespace back.  
Mr.doob 已提交
43 44 
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x222222 );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
45
M
Examples: Bring namespace back.  
Mr.doob 已提交
46 
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.02, 50 );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
47
M
Examples: Bring namespace back.  
Mr.doob 已提交
48 49 
				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
				var material = new THREE.MeshStandardMaterial( {
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
50 51 52 53 
					color: 0x444444,
					roughness: 1.0,
					metalness: 0.0
				} );
M
Examples: Bring namespace back.  
Mr.doob 已提交
54 
				var table = new THREE.Mesh( geometry, material );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
55 56 57 58 
				table.position.y = 0.35;
				table.position.z = 0.85;
				scene.add( table );
M
Examples: Bring namespace back.  
Mr.doob 已提交
59 60 
				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
				var material = new THREE.MeshStandardMaterial( {
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
61 62 63 64 
					color: 0x222222,
					roughness: 1.0,
					metalness: 0.0
				} );
M
Examples: Bring namespace back.  
Mr.doob 已提交
65 
				var floor = new THREE.Mesh( geometry, material );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
66 67 68 
				floor.rotation.x = - Math.PI / 2;
				scene.add( floor );
M
Examples: Bring namespace back.  
Mr.doob 已提交
69 
				var grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
70 71 
				grid.material.depthTest = false; // avoid z-fighting
				scene.add( grid );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
72
M
Examples: Bring namespace back.  
Mr.doob 已提交
73 
				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
74
M
Examples: Bring namespace back.  
Mr.doob 已提交
75 
				var light = new THREE.DirectionalLight( 0xffffff );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
76 77 78 79 80 
				light.position.set( 0, 6, 0 );
				scene.add( light );

				//
M
Examples: Bring namespace back.  
Mr.doob 已提交
81 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
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 114 115 116 
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				renderer.vr.enabled = true;
				container.appendChild( renderer.domElement );

				document.body.appendChild( WEBVR.createButton( renderer ) );

				// controllers

				function onSelectStart() {

					this.userData.isSelecting = true;

				}

				function onSelectEnd() {

					this.userData.isSelecting = false;

				}

				controller1 = renderer.vr.getController( 0 );
				controller1.addEventListener( 'selectstart', onSelectStart );
				controller1.addEventListener( 'selectend', onSelectEnd );
				controller1.userData.id = 0;
				scene.add( controller1 );

				controller2 = renderer.vr.getController( 1 );
				controller2.addEventListener( 'selectstart', onSelectStart );
				controller2.addEventListener( 'selectend', onSelectEnd );
				controller2.userData.id = 1;
				scene.add( controller2 );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
117 
				//
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
118
M
Examples: Bring namespace back.  
Mr.doob 已提交
119 
				var geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
120 
				geometry.rotateX( - Math.PI / 2 );
M
Examples: Bring namespace back.  
Mr.doob 已提交
121 122 
				var material = new THREE.MeshStandardMaterial( { flatShading: true } );
				var mesh = new THREE.Mesh( geometry, material );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
123
M
Examples: Bring namespace back.  
Mr.doob 已提交
124 
				var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
125 126 127 
				pivot.name = 'pivot';
				pivot.position.z = - 0.05;
				mesh.add( pivot );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
128
M
Improved webvr_sculpt example.  
Mr.doob 已提交
129 130 
				controller1.add( mesh.clone() );
				controller2.add( mesh.clone() );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 

				//

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

			}

			function initBlob() {

				/*
				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
				];
M
Examples: More module examples.  
Mugen87 已提交
149 
				var reflectionCube = new CubeTextureLoader().load( urls );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
150 151 
				*/
M
Examples: Bring namespace back.  
Mr.doob 已提交
152 
				var material = new THREE.MeshStandardMaterial( {
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
153 154 155 
					color: 0xffffff,
					// envMap: reflectionCube,
					roughness: 0.9,
M
Improved webvr_sculpt example.  
Mr.doob 已提交
156 157 
					metalness: 0.0,
					transparent: true
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
158 159 
				} );
M
Fixed webvr_sculpt and webvr_vive_sculpt.  
Mr.doob 已提交
160 
				blob = new MarchingCubes( 64, material );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
161 162 163 164 165 166 167 168 169 170 
				blob.position.y = 1;
				scene.add( blob );

				initPoints();

			}

			function initPoints() {

				points = [
M
Examples: Bring namespace back.  
Mr.doob 已提交
171 172 
					{ position: new THREE.Vector3(), strength: 0.04, subtract: 10 },
					{ position: new THREE.Vector3(), strength: - 0.08, subtract: 10 }
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 
				];

			}

			function onWindowResize() {

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

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

			}

			//

			function animate() {

				renderer.setAnimationLoop( render );

			}

			function transformPoint( vector ) {

				vector.x = ( vector.x + 1.0 ) / 2.0;
				vector.y = ( vector.y / 2.0 );
				vector.z = ( vector.z + 1.0 ) / 2.0;

			}

			function handleController( controller ) {

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

				if ( pivot ) {

					var id = controller.userData.id;
					var matrix = pivot.matrixWorld;

					points[ id ].position.setFromMatrixPosition( matrix );
					transformPoint( points[ id ].position );

					if ( controller.userData.isSelecting ) {

						var strength = points[ id ].strength / 2;
M
Examples: Bring namespace back.  
Mr.doob 已提交
218 
						var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
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 248 249 250 251 252 253 254 255 256 257 258 

						transformPoint( vector );

						points.push( { position: vector, strength: strength, subtract: 10 } );

					}

				}

			}

			function updateBlob() {

				blob.reset();

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

					var point = points[ i ];
					var position = point.position;

					blob.addBall( position.x, position.y, position.z, point.strength, point.subtract );

				}

			}

			function render() {

				handleController( controller1 );
				handleController( controller2 );

				updateBlob();

				renderer.render( scene, camera );

			}

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