Sourcecode three.js


<!doctype html>
<html> Splines, http://www.gingerleprechaun.com/javascript/threejs-tween-along-motion-path<br>
http://stackoverflow.com/questions/18578249/three-js-splinecurve3-without-round-edges-or-linecurve3-replacement
<head>
	<meta charset="utf-8">
  <title>Spline following</title>
</head>

<body>

<script src="three.min.js"></script> 
<script> // Our Javascript will go here. 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
var renderer = new THREE.WebGLRenderer();
var geometry = new THREE.CubeGeometry(.5,.5,.5);
var material = new THREE.MeshBasicMaterial({
  color: 0x01ff00f, 
  wireframe: true, 
  wireframeLinewidth: 2
});
var materialCube = new THREE.MeshBasicMaterial({
  color: 0x00aa30, 
  wireframe: false, 
  wireframeLinewidth: 2
});



var cube = new THREE.Mesh(geometry, materialCube);
var cube2 = new THREE.Mesh(geometry, materialCube);

// Spline Definition
// ----------------------------------------
 
// spline = new THREE.ClosedSplineCurve3([
spline = new THREE.SplineCurve3([
   new THREE.Vector3(0, 10, 0),
   new THREE.Vector3(2, 9, 0),
   new THREE.Vector3(5, 11, 0),
   new THREE.Vector3(6, 10, 0),
   new THREE.Vector3(8, 9.5, 0),
]);
spline2 = new THREE.SplineCurve3([
   new THREE.Vector3(0, 5, 0),
   new THREE.Vector3(3, 3, 0),
   new THREE.Vector3(4, 6, 0),
   new THREE.Vector3(7, 2, 0),
   new THREE.Vector3(8, 5, 0),
]);

var numPoints = 100;
var splinePoints = spline.getPoints(numPoints);
var spline2Points = spline2.getPoints(numPoints);
var geometry3 = new THREE.Geometry(); 
var geometry4 = new THREE.Geometry();
 
for(var i = 0; i < splinePoints.length; i++){
    geometry3.vertices.push(splinePoints[i]);  
    geometry4.vertices.push(spline2Points[i]);  
}

var line2 = new THREE.Line(geometry3, material);
var line3 = new THREE.Line(geometry4, material);



// ----------------------------------------
var t = 0.0;

function render() {
  requestAnimationFrame(render);
//  cube.rotation.x += 0.01;
//  cube.rotation.y += 0.01;

  t = t + 0.001;
  cube.position = spline.getPointAt(t)
  cube2.position = spline2.getPointAt(t)
//  camera.position.z += 0.1;
  renderer.render(scene, camera);
};

// ----------------------------------------
// Animation
//var t = 0;
//function update(){
//    t = t + 0.05;
//    particle.position = spline.getPointAt(t)
//}



renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(cube);
scene.add(cube2);
scene.add(line2);
scene.add(line3);

// camera.position.set(0, 0, 100);
camera.position.set(0, 0, 30);
camera.lookAt(new THREE.Vector3(10, 5, 0));

render();

</script>

</body>
</html>
Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s