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.9 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 
			var splinePointsLength = 4;
			var positions = [];
M
Examples: Clean up  
Mugen87 已提交
60 
			var point = new THREE.Vector3();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
61 62 
			var options;
M
Examples: Clean up  
Mugen87 已提交
63 
			var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
64 
			var transformControl;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
65 66 67 

			var ARC_SEGMENTS = 200;
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
Examples: Clean up  
Mugen87 已提交
105 
				var planeGeometry = new THREE.PlaneBufferGeometry( 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 
				transformControl = new THREE.TransformControls( camera, renderer.domElement );
				transformControl.addEventListener( 'change', render );
A
Removed stopPropagation from TransformControls.  
Aki Rodic 已提交
166 167 168 
				transformControl.addEventListener( 'dragging-changed', function ( event ) {
					controls.enabled = !event.value
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
169 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 
				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 已提交
196 
				var dragcontrols = new THREE.DragControls( splineHelperObjects, camera, renderer.domElement ); //
M
DragControls: Simplified code using THREE.Plane approach.  
Mr.doob 已提交
197 
				dragcontrols.enabled = false;
M
Updated examples that use DragControls.  
Mr.doob 已提交
198 
				dragcontrols.addEventListener( 'hoveron', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
199
M
Updated examples that use DragControls.  
Mr.doob 已提交
200 201 
					transformControl.attach( event.object );
					cancelHideTransorm();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
202
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
203 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
204
M
Updated examples that use DragControls.  
Mr.doob 已提交
205 
				dragcontrols.addEventListener( 'hoveroff', function ( event ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
206
M
Updated examples that use DragControls.  
Mr.doob 已提交
207 
					delayHideTransform();
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
208
T
Add missing semicolon in webgl_geometry_spline_editor  
Tristan Valcke 已提交
209 
				} );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
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 238 239 

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

					addSplineObject( positions[ i ] );

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

				for ( var i = 0; i < splinePointsLength; i ++ ) {
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
249 250 251 252 253 

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

				}
M
Examples: Clean up  
Mugen87 已提交
254 255 
				var geometry = new THREE.BufferGeometry();
				geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
256
M
Fixed some lgtm.com alerts.  
Mr.doob 已提交
257 
				var curve = new THREE.CatmullRomCurve3( positions );
M
Curves: Added type property  
Mugen87 已提交
258 
				curve.curveType = 'catmullrom';
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
259 260 261 262 263 
				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 已提交
264 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
265 266 267 
				splines.uniform = curve;

				curve = new THREE.CatmullRomCurve3( positions );
M
Curves: Added type property  
Mugen87 已提交
268 
				curve.curveType = 'centripetal';
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
269 270 271 272 273 
				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 已提交
274 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
275 276 277 
				splines.centripetal = curve;

				curve = new THREE.CatmullRomCurve3( positions );
M
Curves: Added type property  
Mugen87 已提交
278 
				curve.curveType = 'chordal';
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
279 280 281 282 283 
				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 已提交
284 
				curve.mesh.castShadow = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 
				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 已提交
303 304 305 
				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 已提交
306 307 308 309 310 311 312 
				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 已提交
313 
					object.position.y = Math.random() * 600;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 
					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 已提交
329 330 

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

				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 ];
M
Examples: Clean up  
Mugen87 已提交
357 358 
					var splineMesh = spline.mesh;
					var position = splineMesh.geometry.attributes.position;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
359 360 361 

					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
M
Curve: Added optionalTarget to .getPoint() and .getPointAt()  
Mugen87 已提交
362 
						var t = i /  ( ARC_SEGMENTS - 1 );
M
Examples: Clean up  
Mugen87 已提交
363 364 
						spline.getPoint( t, point );
						position.setXYZ( i, point.x, point.y, point.z );
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
365 366 367 

					}
M
Examples: Clean up  
Mugen87 已提交
368 
					position.needsUpdate = true;
J
Initial Spline Editor Example with Drag Controls  
Joshua Koo 已提交
369 370 371 372 373 374 375 376 377 

				}

			}

			function exportSpline() {

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

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

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

				while ( new_positions.length > positions.length ) {

					addPoint();

				}

				while ( new_positions.length < positions.length ) {

					removePoint();

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

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

				}

				updateSplineOutline();

			}

			function animate() {

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

			}

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

			}

		</script>

	</body>
</html>