Examples: Improved webgl_geometry_spline_editor.html

Author: linbingquan

examples/webgl_geometry_spline_editor.html

@@ -22,17 +22,23 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
 		</div>
 
+		<script type="importmap">
+		{
+			"imports": {
+				"three": "../build/three.module.js"
+			}
+		}
+		</script>
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TransformControls } from './jsm/controls/TransformControls.js';
 
-			let container, stats;
+			let container;
 			let camera, scene, renderer;
 			const splineHelperObjects = [];
 			let splinePointsLength = 4;
@@ -62,7 +68,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -108,20 +113,18 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
 				const gui = new GUI();
 
-				gui.add( params, 'uniform' );
+				gui.add( params, 'uniform' ).onChange( render );
 				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					splines.uniform.tension = value;
 					updateSplineOutline();
+					render();
 
 				} );
-				gui.add( params, 'centripetal' );
-				gui.add( params, 'chordal' );
+				gui.add( params, 'centripetal' ).onChange( render );
+				gui.add( params, 'chordal' ).onChange( render );
 				gui.add( params, 'addPoint' );
 				gui.add( params, 'removePoint' );
 				gui.add( params, 'exportSpline' );
@@ -150,6 +153,7 @@
 				document.addEventListener( 'pointerdown', onPointerDown );
 				document.addEventListener( 'pointerup', onPointerUp );
 				document.addEventListener( 'pointermove', onPointerMove );
+				window.addEventListener( 'resize', onWindowResize );
 
 				/*******
 				 * Curves
@@ -211,6 +215,8 @@
 					new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
 					new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
 
+				render();
+
 			}
 
 			function addSplineObject( position ) {
@@ -246,6 +252,8 @@
 
 				updateSplineOutline();
 
+				render();
+
 			}
 
 			function removePoint() {
@@ -265,6 +273,8 @@
 
 				updateSplineOutline();
 
+				render();
+
 			}
 
 			function updateSplineOutline() {
@@ -331,14 +341,6 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-				stats.update();
-
-			}
-
 			function render() {
 
 				splines.uniform.mesh.visible = params.uniform;
@@ -387,6 +389,16 @@
 
 			}
 
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
+			}
 
 		</script>