Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_geometry_spline_editor.html 9.7 KB
Newer Older
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - catmull spline editor</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
M
Spline Editor: Fixed #10891  
Mugen87 已提交
14 15 16 17 18 19 20 21 22 23 

			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
			}
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
24 25 26 27 
		</style>
	</head>
	<body>
M
Spline Editor: Fixed #10891  
Mugen87 已提交
28 29 30 
		<div id="container"></div>
		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - geometry - catmull spline editor</div>
W
Examples: three.min.js -> three.js  
WestLangley 已提交
31 
		<script src="../build/three.js"></script>
M
Updated examples that use DragControls.  
Mr.doob 已提交
32 33 

		<script src="js/controls/DragControls.js"></script>
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
34 35 36 37 
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/controls/TransformControls.js"></script>

		<script src="js/libs/stats.min.js"></script>
M
Spline Editor: Fixed #10891  
Mugen87 已提交
38 
		<script src="js/libs/dat.gui.min.js"></script>
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
39 40 41 42 43 44 

		<script>

			String.prototype.format = function () {

				var str = this;
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
45
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
46 47 48 49 50 51 52 
				for ( var i = 0; i < arguments.length; i ++ ) {

					str = str.replace( '{' + i + '}', arguments[ i ] );

				}
				return str;
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
53 
			};
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
54 55 56 

			var container, stats;
			var camera, scene, renderer;
M
Spline Editor: Fixed #10891  
Mugen87 已提交
57 
			var splineHelperObjects = [], splineOutline;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
58 59 60 61 62 
			var splinePointsLength = 4;
			var positions = [];
			var options;

			var geometry = new THREE.BoxGeometry( 20, 20, 20 );
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
63 
			var transformControl;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
64 65 66 67 

			var ARC_SEGMENTS = 200;
			var splineMesh;
M
Spline Editor: Fixed #10891  
Mugen87 已提交
68 
			var splines = {};
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
69
M
Spline Editor: Fixed #10891  
Mugen87 已提交
70 71 72 73 74 75 76 77 
			var params = {
				uniform: true,
				tension: 0.5,
				centripetal: true,
				chordal: true,
				addPoint: addPoint,
				removePoint: removePoint,
				exportSpline: exportSpline
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
78 79 80 81 82 83 84 
			};

			init();
			animate();

			function init() {
M
Spline Editor: Fixed #10891  
Mugen87 已提交
85 86 
				container = document.getElementById( 'container' );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
87 88 
				scene = new THREE.Scene();
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
M
Spline Editor: Fixed #10891  
Mugen87 已提交
89 
				camera.position.set( 0, 250, 1000 );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
90 91 
				scene.add( camera );
M
MeshBasicMaterial: Reverted shadowmap removal.  
Mr.doob 已提交
92 
				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
93 94 95 
				var light = new THREE.SpotLight( 0xffffff, 1.5 );
				light.position.set( 0, 1500, 200 );
				light.castShadow = true;
M
Fixed examples that relied in custom LightShadows. See #7690.  
Mr.doob 已提交
96 
				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
M
Examples: Cleanup  
Mugen87 已提交
97 98 99 
				light.shadow.bias = -0.000222;
				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
100 101 102 
				scene.add( light );
				spotlight = light;
M
Tweaked examples.  
Mr.doob 已提交
103 
				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
W
Added transform methods to Geometry and BufferGeometry  
WestLangley 已提交
104 
				planeGeometry.rotateX( - Math.PI / 2 );
M
ShadowMaterial: Added parameters  
Mugen87 已提交
105 
				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
M
Cleaned up spline editor example.  
Mr.doob 已提交
106 107 

				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
108 
				plane.position.y = -200;
M
Cleaned up spline editor example.  
Mr.doob 已提交
109 
				plane.receiveShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
110 
				scene.add( plane );
M
Cleaned up spline editor example.  
Mr.doob 已提交
111
M
GridHelper: Adjust examples  
Mugen87 已提交
112 
				var helper = new THREE.GridHelper( 2000, 100 );
M
Cleaned up spline editor example.  
Mr.doob 已提交
113 114 115 116 117 
				helper.position.y = - 199;
				helper.material.opacity = 0.25;
				helper.material.transparent = true;
				scene.add( helper );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
118 119 120 121 
				var axis = new THREE.AxisHelper();
				axis.position.set( -500, -500, -500 );
				scene.add( axis );
M
Cleaned up spline editor example.  
Mr.doob 已提交
122 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
123 
				renderer.setClearColor( 0xf0f0f0 );
M
Examples clean up.  
Mr.doob 已提交
124 
				renderer.setPixelRatio( window.devicePixelRatio );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
125 
				renderer.setSize( window.innerWidth, window.innerHeight );
M
Cleaned up spline editor example.  
Mr.doob 已提交
126 
				renderer.shadowMap.enabled = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
127 
				container.appendChild( renderer.domElement );
M
Cleaned up spline editor example.  
Mr.doob 已提交
128
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
129 
				stats = new Stats();
M
stats.js usage clean up  
Mr.doob 已提交
130 
				container.appendChild( stats.dom );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
131
M
Spline Editor: Fixed #10891  
Mugen87 已提交
132 133 134 135 136 137 138 139 140 141 142 143 144 145 
				var gui = new dat.GUI();

				gui.add( params, 'uniform' );
				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function( value ) {
					splines.uniform.tension = value;
					updateSplineOutline();
				});
				gui.add( params, 'centripetal' );
				gui.add( params, 'chordal' );
				gui.add( params, 'addPoint' );
				gui.add( params, 'removePoint' );
				gui.add( params, 'exportSpline' );
				gui.open();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
146 
				// Controls
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
147 
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
148 149 150 
				controls.damping = 0.2;
				controls.addEventListener( 'change', render );
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
151 152 153 154 155 156 157 158 159 160 161 162 
				controls.addEventListener( 'start', function() {

					cancelHideTransorm();

				} );

				controls.addEventListener( 'end', function() {

					delayHideTransform();

				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
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 
				transformControl = new THREE.TransformControls( camera, renderer.domElement );
				transformControl.addEventListener( 'change', render );
				scene.add( transformControl );

				// Hiding transform situation is a little in a mess :()
				transformControl.addEventListener( 'change', function( e ) {

					cancelHideTransorm();

				} );

				transformControl.addEventListener( 'mouseDown', function( e ) {

					cancelHideTransorm();

				} );

				transformControl.addEventListener( 'mouseUp', function( e ) {

					delayHideTransform();

				} );

				transformControl.addEventListener( 'objectChange', function( e ) {

					updateSplineOutline();

				} );
M
DragControls: Refactoring and API changes.  
Mr.doob 已提交
192 
				var dragcontrols = new THREE.DragControls( splineHelperObjects, camera, renderer.domElement ); //
M
DragControls: Simplified code using THREE.Plane approach.  
Mr.doob 已提交
193 
				dragcontrols.enabled = false;
M
Updated examples that use DragControls.  
Mr.doob 已提交
194 
				dragcontrols.addEventListener( 'hoveron', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
195
M
Updated examples that use DragControls.  
Mr.doob 已提交
196 197 
					transformControl.attach( event.object );
					cancelHideTransorm();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
198
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
199 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
200
M
Updated examples that use DragControls.  
Mr.doob 已提交
201 
				dragcontrols.addEventListener( 'hoveroff', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
202
M
Updated examples that use DragControls.  
Mr.doob 已提交
203 
					delayHideTransform();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
204
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
205 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 

				var hiding;

				function delayHideTransform() {

					cancelHideTransorm();
					hideTransform();

				}

				function hideTransform() {

					hiding = setTimeout( function() {

						transformControl.detach( transformControl.object );

					}, 2500 )

				}

				function cancelHideTransorm() {

					if ( hiding ) clearTimeout( hiding );

				}


				/*******
				 * Curves
				 *********/
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
237 
				for ( var i = 0; i < splinePointsLength; i ++ ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
238 239 240 241 

					addSplineObject( positions[ i ] );

				}
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
242
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
243 
				positions = [];
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
244 245 

				for ( var i = 0; i < splinePointsLength; i ++ ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
246 247 248 249 250 251 252 253 254 255 256 257 258 

					positions.push( splineHelperObjects[ i ].position );

				}

				var geometry = new THREE.Geometry();

				for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {

					geometry.vertices.push( new THREE.Vector3() );

				}
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
259 
				var curve = new THREE.CatmullRomCurve3( positions );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
260 261 262 263 264 265 
				curve.type = 'catmullrom';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0xff0000,
					opacity: 0.35,
					linewidth: 2
					} ) );
M
Cleaned up spline editor example.  
Mr.doob 已提交
266 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
267 268 269 270 271 272 273 274 275 
				splines.uniform = curve;

				curve = new THREE.CatmullRomCurve3( positions );
				curve.type = 'centripetal';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x00ff00,
					opacity: 0.35,
					linewidth: 2
					} ) );
M
Cleaned up spline editor example.  
Mr.doob 已提交
276 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
277 278 279 280 281 282 283 284 285 
				splines.centripetal = curve;

				curve = new THREE.CatmullRomCurve3( positions );
				curve.type = 'chordal';
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x0000ff,
					opacity: 0.35,
					linewidth: 2
					} ) );
M
Cleaned up spline editor example.  
Mr.doob 已提交
286 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 
				splines.chordal = curve;

				for ( var k in splines ) {

					var spline = splines[ k ];
					scene.add( spline.mesh );

				}

				load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
						new THREE.Vector3( -53.56300074753207, 171.49711742836848, -14.495472686253045 ),
						new THREE.Vector3( -91.40118730204415, 176.4306956436485, -6.958271935582161 ),
						new THREE.Vector3( -383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );

			}

			function addSplineObject( position ) {
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
305 306 307 
				var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
				var object = new THREE.Mesh( geometry, material );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
308 309 310 311 312 313 314 
				if ( position ) {

					object.position.copy( position );

				} else {

					object.position.x = Math.random() * 1000 - 500;
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
315 
					object.position.y = Math.random() * 600;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 
					object.position.z = Math.random() * 800 - 400;

				}

				object.castShadow = true;
				object.receiveShadow = true;
				scene.add( object );
				splineHelperObjects.push( object );
				return object;

			}

			function addPoint() {

				splinePointsLength ++;
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
331 332 

				positions.push( addSplineObject().position );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 

				updateSplineOutline();

			}

			function removePoint() {

				if ( splinePointsLength <= 4 ) {

					return;

				}
				splinePointsLength --;
				positions.pop();
				scene.remove( splineHelperObjects.pop() );

				updateSplineOutline();

			}

			function updateSplineOutline() {

				for ( var k in splines ) {

					var spline = splines[ k ];

					splineMesh = spline.mesh;

					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
363 
						var p = splineMesh.geometry.vertices[ i ];
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 
						p.copy( spline.getPoint( i /  ( ARC_SEGMENTS - 1 ) ) );

					}

					splineMesh.geometry.verticesNeedUpdate = true;

				}


			}

			function exportSpline() {

				var strplace = [];
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
379 380 381 
				for ( var i = 0; i < splinePointsLength; i ++ ) {

					var p = splineHelperObjects[ i ].position;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
382 383 384 
					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) )

				}
M
Spline Editor: Fixed #10891  
Mugen87 已提交
385
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
386 387 388 389 
				console.log( strplace.join( ',\n' ) );
				var code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
				prompt( 'copy and paste code', code );
M
Spline Editor: Fixed #10891  
Mugen87 已提交
390 
			}
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
391
M
Spline Editor: Fixed #10891  
Mugen87 已提交
392 
			function load( new_positions ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
393 394 395 396 397 398 399 400 401 402 403 404 405 

				while ( new_positions.length > positions.length ) {

					addPoint();

				}

				while ( new_positions.length < positions.length ) {

					removePoint();

				}
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
406 
				for ( var i = 0; i < positions.length; i ++ ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 

					positions[ i ].copy( new_positions[ i ] );

				}

				updateSplineOutline();

			}

			function animate() {

				requestAnimationFrame( animate );
				render();
				stats.update();
				transformControl.update();

			}

			function render() {
M
Spline Editor: Fixed #10891  
Mugen87 已提交
427 428 429 
				splines.uniform.mesh.visible = params.uniform;
				splines.centripetal.mesh.visible = params.centripetal;
				splines.chordal.mesh.visible = params.chordal;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
430 431 432 433 434 435 436 437 
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>