three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

JavaScript

//////////////////////////////////////////////////////////////////////////////////
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(20, 10, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

scene.add(new THREE.AmbientLight(0x101030))
    .add(new THREE.DirectionalLight(0xffeedd).translateX(-1).translateY(1).translateZ(1))
    .add(new THREE.DirectionalLight(0xffeedd).translateX(1).translateY(-1).translateZ(1))
    .add(new THREE.DirectionalLight(0xffeedd).translateX(1).translateY(-1).translateZ(-1));

var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//////////////////////////////////////////////////////////////////////////////////
var dist1 = 10;
var dist2 = 10;
//////////////////////////////////////////////////////////////////////////////////
function tube(V) {
    var TUBE_WIDTH = 0.2;
    return new THREE.TubeGeometry(
        new THREE.CubicBezierCurve3(V[0], V[1], V[2], V[3]),
        30,
        TUBE_WIDTH
    );
}
function mesh(geometry, color) {
    var result = new THREE.Mesh(
        geometry,
        new THREE.MeshLambertMaterial({ color: color })
    );
    result.receiveShadow = false;
    result.castShadow    = true;
    return result;
}
var end1 = new THREE.Vector3(2, 2, 2);
var end2 = new THREE.Vector3(2, 2, 6);
var dir1 = new THREE.Vector3(1, 0, 0);
var dir2 = new THREE.Vector3(0, 1, 0);
var geometry = tube([
    end1,
    end1.clone().add(dir1.clone().multiplyScalar(dist1)),
    end2.clone().add(dir2.clone().multiplyScalar(dist2)),
    end2
]);
scene.add( mesh(geometry, 0xff0000) );
var arrow1 = new THREE.ArrowHelper(dir1, end1, dist1, 0x000000);
var arrow2 = new THREE.ArrowHelper(dir2, end2, dist2, 0x000000);
scene.add(arrow1).add(arrow2);
var axisHelper = new THREE.AxisHelper( 30 );
scene.add(...