|
@@ -11,10 +11,23 @@
|
|
|
margin: 0px;
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ #info {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 5px;
|
|
|
|
|
+ font-family:Monospace;
|
|
|
|
|
+ font-size:13px;
|
|
|
|
|
+ text-align:center;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
+ <div id="container"></div>
|
|
|
|
|
+ <div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - geometry - catmull spline editor</div>
|
|
|
|
|
+
|
|
|
<script src="../build/three.js"></script>
|
|
<script src="../build/three.js"></script>
|
|
|
|
|
|
|
|
<script src="js/controls/DragControls.js"></script>
|
|
<script src="js/controls/DragControls.js"></script>
|
|
@@ -22,6 +35,7 @@
|
|
|
<script src="js/controls/TransformControls.js"></script>
|
|
<script src="js/controls/TransformControls.js"></script>
|
|
|
|
|
|
|
|
<script src="js/libs/stats.min.js"></script>
|
|
<script src="js/libs/stats.min.js"></script>
|
|
|
|
|
+ <script src="js/libs/dat.gui.min.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
|
@@ -39,8 +53,7 @@
|
|
|
|
|
|
|
|
var container, stats;
|
|
var container, stats;
|
|
|
var camera, scene, renderer;
|
|
var camera, scene, renderer;
|
|
|
- var splineHelperObjects = [],
|
|
|
|
|
- splineOutline;
|
|
|
|
|
|
|
+ var splineHelperObjects = [], splineOutline;
|
|
|
var splinePointsLength = 4;
|
|
var splinePointsLength = 4;
|
|
|
var positions = [];
|
|
var positions = [];
|
|
|
var options;
|
|
var options;
|
|
@@ -50,8 +63,16 @@
|
|
|
var ARC_SEGMENTS = 200;
|
|
var ARC_SEGMENTS = 200;
|
|
|
var splineMesh;
|
|
var splineMesh;
|
|
|
|
|
|
|
|
- var splines = {
|
|
|
|
|
|
|
+ var splines = {};
|
|
|
|
|
|
|
|
|
|
+ var params = {
|
|
|
|
|
+ uniform: true,
|
|
|
|
|
+ tension: 0.5,
|
|
|
|
|
+ centripetal: true,
|
|
|
|
|
+ chordal: true,
|
|
|
|
|
+ addPoint: addPoint,
|
|
|
|
|
+ removePoint: removePoint,
|
|
|
|
|
+ exportSpline: exportSpline
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
init();
|
|
init();
|
|
@@ -59,11 +80,11 @@
|
|
|
|
|
|
|
|
function init() {
|
|
function init() {
|
|
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
|
|
- document.body.appendChild( container );
|
|
|
|
|
|
|
+ container = document.getElementById( 'container' );
|
|
|
|
|
+
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
- camera.position.z = 1000;
|
|
|
|
|
|
|
+ camera.position.set( 0, 250, 1000 );
|
|
|
scene.add( camera );
|
|
scene.add( camera );
|
|
|
|
|
|
|
|
scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
|
|
scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
|
|
@@ -106,31 +127,23 @@
|
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.enabled = true;
|
|
|
container.appendChild( renderer.domElement );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
- var info = document.createElement( 'div' );
|
|
|
|
|
- info.style.position = 'absolute';
|
|
|
|
|
- info.style.top = '10px';
|
|
|
|
|
- info.style.width = '100%';
|
|
|
|
|
- info.style.textAlign = 'center';
|
|
|
|
|
- info.innerHTML = 'catmull-rom rom spline comparisions';
|
|
|
|
|
- options = document.createElement( 'div' );
|
|
|
|
|
- options.style.position = 'absolute';
|
|
|
|
|
- options.style.top = '30px';
|
|
|
|
|
- options.style.width = '100%';
|
|
|
|
|
- options.style.textAlign = 'center';
|
|
|
|
|
-
|
|
|
|
|
- options.innerHTML = 'Points: <input type="button" onclick="addPoint();" value="+" />\
|
|
|
|
|
- <input type="button" onclick="removePoint();" value="-" />\
|
|
|
|
|
- <input type="button" onclick="exportSpline();" value="Export" /><br />\
|
|
|
|
|
- <input type="checkbox" id="uniform" checked /> <label for="uniform">Uniform Catmull-rom</label> <input type="range" id="tension" onchange="splines.uniform.tension = tension.value;updateSplineOutline();" min=0 max=1 step=0.01 value=0.5 /> <span id="tension_value" /></span> <br />\
|
|
|
|
|
- <input type="checkbox" id="centripetal" checked /> Centripetal Catmull-rom<br />\
|
|
|
|
|
- <input type="checkbox" id="chordal" checked /> Chordal Catmull-rom<br />';
|
|
|
|
|
-
|
|
|
|
|
- container.appendChild( info );
|
|
|
|
|
- container.appendChild( options );
|
|
|
|
|
-
|
|
|
|
|
stats = new Stats();
|
|
stats = new Stats();
|
|
|
container.appendChild( stats.dom );
|
|
container.appendChild( stats.dom );
|
|
|
|
|
|
|
|
|
|
+ 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();
|
|
|
|
|
+
|
|
|
// Controls
|
|
// Controls
|
|
|
controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
controls.damping = 0.2;
|
|
controls.damping = 0.2;
|
|
@@ -377,13 +390,14 @@
|
|
|
strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) )
|
|
strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) )
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
console.log( strplace.join( ',\n' ) );
|
|
console.log( strplace.join( ',\n' ) );
|
|
|
var code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
|
|
var code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
|
|
|
prompt( 'copy and paste code', code );
|
|
prompt( 'copy and paste code', code );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- function load( new_positions ) {
|
|
|
|
|
|
|
+ function load( new_positions ) {
|
|
|
|
|
|
|
|
while ( new_positions.length > positions.length ) {
|
|
while ( new_positions.length > positions.length ) {
|
|
|
|
|
|
|
@@ -412,16 +426,15 @@
|
|
|
requestAnimationFrame( animate );
|
|
requestAnimationFrame( animate );
|
|
|
render();
|
|
render();
|
|
|
stats.update();
|
|
stats.update();
|
|
|
- controls.update();
|
|
|
|
|
transformControl.update();
|
|
transformControl.update();
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function render() {
|
|
function render() {
|
|
|
|
|
|
|
|
- splines.uniform.mesh.visible = uniform.checked;
|
|
|
|
|
- splines.centripetal.mesh.visible = centripetal.checked;
|
|
|
|
|
- splines.chordal.mesh.visible = chordal.checked;
|
|
|
|
|
|
|
+ splines.uniform.mesh.visible = params.uniform;
|
|
|
|
|
+ splines.centripetal.mesh.visible = params.centripetal;
|
|
|
|
|
+ splines.chordal.mesh.visible = params.chordal;
|
|
|
renderer.render( scene, camera );
|
|
renderer.render( scene, camera );
|
|
|
|
|
|
|
|
}
|
|
}
|
Mugen87