cube along curve

by bhupendra negi

HTML

<script src="http://frontier.lincoln.ac.uk/3d/development/Stage3/THREE_54/examples/js/controls/TrackballControls.js"></script>
<body onLoad="init()"></body>

CSS

body {
    font-family: Monospace;
    /*  background-color: #a8ddf8;*/
    margin: 0px;
    overflow: hidden;
}

JavaScript

var controls, scene, camera, box, spline, counter = 0;

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(0, 0, 100);
    //camera.lookAt( new THREE.Vector3( 0, 1, 0 ) );
    scene = new THREE.Scene();
    controls = new THREE.TrackballControls(camera, render.domElement);

    var numPoints = 50;

    spline = new THREE.SplineCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 200, 0),
    new THREE.Vector3(150, 150, 0),
    new THREE.Vector3(150, 50, 0),
    new THREE.Vector3(250, 100, 0),
    new THREE.Vector3(250, 300, 0)]);

    var material = new THREE.LineBasicMaterial({
        color: 0xff00f0,
    });

    var geometry = new THREE.Geometry();
    var splinePoints = spline.getPoints(numPoints);

    for (var i = 0; i < splinePoints.length; i++) {
        geometry.vertices.push(splinePoints[i]);
    }

    var line = new THREE.Line(geometry, material);
    scene.add(line);

    geometry1 = new THREE.CubeGeometry(20, 20, 20);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    box = new THREE.Mesh(geometry1, material);
    scene.add(box);

    geometry.computeBoundingBox();

    // adding cube
    var centerX = 2 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
    var centerY = 2 * (geometry.boundingBox.max.y - geometry.boundingBox.min.y);
    var centerZ = 2 * (geometry.boundingBox.max.z - geometry.boundingBox.min.z);

    var boundingBoxGeometry = new THREE.CubeGeometry(centerX, centerY, centerZ);
    for (var i = 0; i < boundingBoxGeometry.faces.length; i++) {
        boundingBoxGeometry.faces[i].color.setHex(Math.random() * 0xffffff);

    }

    // alert details
    console.log("max= " + geometry.boundingBox.max.x + "min =" + geometry.boundingBox.min.x)


   ...