Graphics Reference
In-Depth Information
1. The first thing we do is create a number of global variables, which we'll ac-
cess in the following steps:
var plane;
var selectedObject;
var projector = new THREE.Projector();
var offset = new THREE.Vector3();
var objects =[];
We'll explain how these objects are used in the upcoming steps.
2. When we want to move an object around, we need to determine on what
plane (around which axis) we're going to move the selected cube. A mouse
moves in two dimensions, while our scene moves in three. For this, we'll use
a invisible helper plane, which we define like this:
plane = new THREE.Mesh( new
THREE.PlaneGeometry( 2000, 2000, 18, 18
), new THREE.MeshBasicMaterial() );
plane.visible = false;
scene.add( plane );
This plane is assigned to the global plane variable we saw in step 1.
3. The next step is to create all the cubes. For an easy understanding of this
recipe, we list the code about how cubes are created:
for (var i = 0 ; i < 200 ; i ++) {
var cubeGeometry = new
THREE.BoxGeometry(2, 2, 2);
var cubeMaterial = new
THREE.MeshLambertMaterial({color:
Math.random() * 0xffffff});
cubeMaterial.transparent = true;
cube = new THREE.Mesh(cubeGeometry,
cubeMaterial);
objects.push(cube);
// randomize position, scale and
Search WWH ::




Custom Search