|
|
@@ -26,13 +26,12 @@
|
|
|
|
|
|
import * as THREE from '../build/three.module.js';
|
|
|
|
|
|
- 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 +61,6 @@
|
|
|
};
|
|
|
|
|
|
init();
|
|
|
- animate();
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
@@ -108,20 +106,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 +146,7 @@
|
|
|
document.addEventListener( 'pointerdown', onPointerDown );
|
|
|
document.addEventListener( 'pointerup', onPointerUp );
|
|
|
document.addEventListener( 'pointermove', onPointerMove );
|
|
|
+ window.addEventListener( 'resize', onWindowResize );
|
|
|
|
|
|
/*******
|
|
|
* Curves
|
|
|
@@ -211,6 +208,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 +245,8 @@
|
|
|
|
|
|
updateSplineOutline();
|
|
|
|
|
|
+ render();
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function removePoint() {
|
|
|
@@ -265,6 +266,8 @@
|
|
|
|
|
|
updateSplineOutline();
|
|
|
|
|
|
+ render();
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function updateSplineOutline() {
|
|
|
@@ -331,14 +334,6 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
function render() {
|
|
|
|
|
|
splines.uniform.mesh.visible = params.uniform;
|
|
|
@@ -387,6 +382,16 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ function onWindowResize() {
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ render();
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
</script>
|
|
|
|
linbingquan