Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webvr_sculpt.html 5.9 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
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
8 9 10 
	</head>
	<body>
M
Examples: Unified CSS.  
Mr.doob 已提交
11 12 13 14 
		<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 已提交
15 
		<script src="js/vr/HelioWebXRPolyfill.js"></script>
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
16 17 
		<script src="js/vr/WebVR.js"></script>
M
Examples: More module examples.  
Mugen87 已提交
18 
		<script type="module">
M
Examples: Bring namespace back.  
Mr.doob 已提交
19 
			import * as THREE from '../build/three.module.js';
M
Examples: More module examples.  
Mugen87 已提交
20 21 

			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
22 23 24 25 26 

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

			var points = [];

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

			function init() {

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

				//
M
Examples: Bring namespace back.  
Mr.doob 已提交
78 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
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 
				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 已提交
114 
				//
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
115
M
Examples: Bring namespace back.  
Mr.doob 已提交
116 
				var geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
117 
				geometry.rotateX( - Math.PI / 2 );
M
Examples: Bring namespace back.  
Mr.doob 已提交
118 119 
				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 已提交
120
M
Examples: Bring namespace back.  
Mr.doob 已提交
121 
				var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) );
M
Improved webvr_sculpt example.  
Mr.doob 已提交
122 123 124 
				pivot.name = 'pivot';
				pivot.position.z = - 0.05;
				mesh.add( pivot );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
125
M
Improved webvr_sculpt example.  
Mr.doob 已提交
126 127 
				controller1.add( mesh.clone() );
				controller2.add( mesh.clone() );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 

				//

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

				initPoints();

			}

			function initPoints() {

				points = [
M
Examples: Bring namespace back.  
Mr.doob 已提交
168 169 
					{ 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 已提交
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 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 
				];

			}

			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 已提交
215 
						var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
M
Added webvr_paint and webvr_sculpt. Removed webvr_vive.  
Mr.doob 已提交
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 248 249 250 251 252 253 254 255 

						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>