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 
		<div id="container"></div>
M
Fixed lgtm.com unsafe external link alerts.  
Mr.doob 已提交
29 
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor</div>
M
Spline Editor: Fixed #10891  
Mugen87 已提交
30
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 
				scene = new THREE.Scene();
M
Examples: Replaced relevant renderer.setClearColor() with scene.background.  
Mr.doob 已提交
88 89 
				scene.background = new THREE.Color( 0xf0f0f0 );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
90 
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
M
Spline Editor: Fixed #10891  
Mugen87 已提交
91 
				camera.position.set( 0, 250, 1000 );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
92 93 
				scene.add( camera );
M
MeshBasicMaterial: Reverted shadowmap removal.  
Mr.doob 已提交
94 
				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
95 96 97 
				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 已提交
98 
				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
M
Examples: Cleanup  
Mugen87 已提交
99 100 101 
				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 已提交
102 103 104 
				scene.add( light );
				spotlight = light;
M
Tweaked examples.  
Mr.doob 已提交
105 
				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
W
Added transform methods to Geometry and BufferGeometry  
WestLangley 已提交
106 
				planeGeometry.rotateX( - Math.PI / 2 );
M
ShadowMaterial: Added parameters  
Mugen87 已提交
107 
				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
M
Cleaned up spline editor example.  
Mr.doob 已提交
108 109 

				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
110 
				plane.position.y = -200;
M
Cleaned up spline editor example.  
Mr.doob 已提交
111 
				plane.receiveShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
112 
				scene.add( plane );
M
Cleaned up spline editor example.  
Mr.doob 已提交
113
M
GridHelper: Adjust examples  
Mugen87 已提交
114 
				var helper = new THREE.GridHelper( 2000, 100 );
M
Cleaned up spline editor example.  
Mr.doob 已提交
115 116 117 118 119 
				helper.position.y = - 199;
				helper.material.opacity = 0.25;
				helper.material.transparent = true;
				scene.add( helper );
W
AxisHelper renamed to AxesHelper  
WestLangley 已提交
120 121 122 
				//var axes = new THREE.AxesHelper( 1000 );
				//axes.position.set( - 500, - 500, - 500 );
				//scene.add( axes );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
123
M
Cleaned up spline editor example.  
Mr.doob 已提交
124 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
Examples clean up.  
Mr.doob 已提交
125 
				renderer.setPixelRatio( window.devicePixelRatio );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
126 
				renderer.setSize( window.innerWidth, window.innerHeight );
M
Cleaned up spline editor example.  
Mr.doob 已提交
127 
				renderer.shadowMap.enabled = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
128 
				container.appendChild( renderer.domElement );
M
Cleaned up spline editor example.  
Mr.doob 已提交
129
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
130 
				stats = new Stats();
M
stats.js usage clean up  
Mr.doob 已提交
131 
				container.appendChild( stats.dom );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
132
M
Spline Editor: Fixed #10891  
Mugen87 已提交
133 134 135 136 137 138 139 140 141 142 143 144 145 146 
				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 已提交
147 
				// Controls
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
148 
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
149 150 151 
				controls.damping = 0.2;
				controls.addEventListener( 'change', render );
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
152 153 154 155 156 157 158 159 160 161 162 163 
				controls.addEventListener( 'start', function() {

					cancelHideTransorm();

				} );

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

					delayHideTransform();

				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
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 
				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 已提交
193 
				var dragcontrols = new THREE.DragControls( splineHelperObjects, camera, renderer.domElement ); //
M
DragControls: Simplified code using THREE.Plane approach.  
Mr.doob 已提交
194 
				dragcontrols.enabled = false;
M
Updated examples that use DragControls.  
Mr.doob 已提交
195 
				dragcontrols.addEventListener( 'hoveron', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
196
M
Updated examples that use DragControls.  
Mr.doob 已提交
197 198 
					transformControl.attach( event.object );
					cancelHideTransorm();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
199
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
200 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
201
M
Updated examples that use DragControls.  
Mr.doob 已提交
202 
				dragcontrols.addEventListener( 'hoveroff', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
203
M
Updated examples that use DragControls.  
Mr.doob 已提交
204 
					delayHideTransform();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
205
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
206 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
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 237 

				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 已提交
238 
				for ( var i = 0; i < splinePointsLength; i ++ ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
239 240 241 242 

					addSplineObject( positions[ i ] );

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

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

					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 已提交
260 
				var curve = new THREE.CatmullRomCurve3( positions );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
261 262 263 264 265 266 
				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 已提交
267 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
268 269 270 271 272 273 274 275 276 
				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 已提交
277 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
278 279 280 281 282 283 284 285 286 
				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 已提交
287 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 
				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 已提交
306 307 308 
				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 已提交
309 310 311 312 313 314 315 
				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 已提交
316 
					object.position.y = Math.random() * 600;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 
					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 已提交
332 333 

				positions.push( addSplineObject().position );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
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 363 

				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 已提交
364 
						var p = splineMesh.geometry.vertices[ i ];
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 
						p.copy( spline.getPoint( i /  ( ARC_SEGMENTS - 1 ) ) );

					}

					splineMesh.geometry.verticesNeedUpdate = true;

				}


			}

			function exportSpline() {

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

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

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

				while ( new_positions.length > positions.length ) {

					addPoint();

				}

				while ( new_positions.length < positions.length ) {

					removePoint();

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

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

				}

				updateSplineOutline();

			}

			function animate() {

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

			}

			function render() {
M
Spline Editor: Fixed #10891  
Mugen87 已提交
428 429 430 
				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 已提交
431 432 433 434 435 436 437 438 
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>