Being new to 3D graphics and the threejs library, I am trying to achieve an effect, that makes it appear as though a row of boxes 'point' towards a physical point in front of the computer screen.
I have made a simple function that renders a number of boxes. It has an aimAt method which, given a 3d point, will place the boxes on a line in 3d. This line coects the world center, with the given 3d point (although the boxes are only distributed across the first 6 length-units of the line).
var CubeManager = function (scene) {
var N_CUBES = 32;
var ROW_LENGTH = 6;
var cubes = [];
var geometry = new THREE.BoxGeometry(.1, .1, .1);
var material = new THREE.MeshLambertMaterial({color: 0x336600});
for (var i=0;i<N_CUBES;i++) {
var cube = new THREE.Mesh(geometry, material);
cubes.push(cube);
scene.add(cube);
}
function aimAt(p) {
var distance = Math.sqrt(p.x*p.x + p.y*p.y + p.z*p.z);
for (var i=0; i<cubes.length; i++) {
var factor = ROW_LENGTH * (i/cubes.length) / distance;
cubes[i].position.x = factor * p.x;
cubes[i].position.y = factor * p.y;
cubes[i].position.z = factor * p.z;
}
}
aimAt({x: -2, y: 0, z: 27});
};
I invoke the CubeManager function from a separate file in which I setup my 3d scene:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.ierWidth/window.ierHeight, 0.1, 1000);
var cubeManager = new CubeManager(scene);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.ierWidth, window.ierHeight);
document.body.appendChild(renderer.domElement);
var light = new THREE.PointLight( 0xff0000, 5, 100000 );
light.position.set( 0, 0, 7 );
scene.add( light );
camera.position.z = 7;
renderer.render(scene, camera);
By calling aimAt({x: -2, y: 0, z: 27}) at the end of my cubeManager, I am trying to align my boxes so they aim at a point in the physical world that is two units to the left of my screens center point and 20 units in front of it (the additional 7 units of z coordinate are to account for the fact that my virtual camera is 7 units in front of the 3d worlds xy plane).
However, this clearly doesn't work. The boxes do not appear to point towards this point in the physical world. Is it possible to achieve this effect, though? Perhaps by adjusting the parameters of my PerspectiveCamera?
