Positioning mesh in three.js <p>I m trying to understand how i can positioning my cubes in the canvas. But i don't understand how positioning work. I m looking a way to detect if my mesh meet the limit of the canvas. But what is the unit of position.x or position.y ? </p> <p>And what is the relation between the canvas width , height and meshs on in the canvas?</p> <p>Thanks.</p> <pre><code> var geometry = new Array(),material = new Array(),cube = new Array(); var i = 0; for(i=0; i &lt; 10;i++){ geometry[i] = new THREE.BoxGeometry(1,1,1); material[i] = new THREE.MeshBasicMaterial({ color: 0x33FF99 }); cube[i] = new THREE.Mesh(geometry[i], material[i]); scene.add(cube[i]); } camera.position.z = 5; var render = function () { requestAnimationFrame(render); var xRandom = 0; var yRandom = 0; var zRandom = 0; var sens = 1; for (i = 0; i &lt; cube.length ; i++) { document.getElementById('widthHeight').innerHTML = " " + window.innerHeight + " " + window.innerWidth + "&lt;br&gt; x:" + cube[i].position.x + " &lt;br&gt; y:" + cube[i].position.y + " &lt;br&gt; z:" + cube[i].position.z; xRandom = (Math.random() * 0.010 + 0.001) * sens; yRandom = (Math.random() * 0.010 + 0.001) * sens; zRandom = (Math.random() * 0.010 + 0.001) * sens; cube[i].position.setX(xRandom + cube[i].position.x); cube[i].position.setY(yRandom + cube[i].position.y); cube[i].position.setZ(zRandom + cube[i].position.z); cube[i].rotation.x += 0.0191; cube[i].rotation.y += 0.0198; } renderer.render(scene, camera); }; render(); </code></pre> <p>i added a PlaneGeometry and some tests to detect if cubes reach limit x or y of the new PlaneGeometry. </p> <pre><code> var geometry = new Array(),material = new Array(),cube = new Array(); var i = 0; var planeMap = new THREE.PlaneGeometry(100, 100); var materialMap = new THREE.MeshBasicMaterial({ color: 0xCE0F0F }); var map = new THREE.Mesh(planeMap,materialMap); scene.add(map); for(i=0; i &lt; 5; i++){ geometry[i] = new THREE.BoxGeometry(3,3,3); material[i] = new THREE.MeshBasicMaterial({ color: 0x336699 }); cube[i] = new THREE.Mesh(geometry[i], material[i]); scene.add(cube[i]); } camera.position.z = 100; var render = function () { requestAnimationFrame(render); var xRandom = 0,yRandom = 0,zRandom = 0,x=0,y=0,z=0; var sensX = 1, sensY = 1, sensZ = 1; var widthHeight = document.getElementById('widthHeight'); for (i = 0; i &lt; cube.length ; i++) { if (cube[i].geometry.type == "BoxGeometry") { widthHeight.innerHTML = " " + window.innerHeight + " " + window.innerWidth + "&lt;br&gt; x:" + cube[i].position.x + " &lt;br&gt; y:" + cube[i].position.y + " &lt;br&gt; z:" + cube[i].position.z; var currentCube = cube[i].position; var widthCube = cube[i].geometry.parameters.width; var heightCube = cube[i].geometry.parameters.height; x = currentCube.x; y = currentCube.y; z = currentCube.z; if (x &gt;= ((map.geometry.parameters.width / 2) - widthCube)) { sensX = -1; } if (x &lt;= ((map.geometry.parameters.width / 2) - widthCube)*-1) { sensX = 1; } if (y &gt;= ((map.geometry.parameters.height / 2) - heightCube)) { sensY = -1; } if (y &lt;= ((map.geometry.parameters.height / 2) - heightCube)*-1) { sensY = 1; } xRandom = (Math.random() * 0.650 + 0.001) * sensX * (i + 1); yRandom = (Math.random() * 0.850 + 0.001) * sensY * (i + 1); //zRandom = (Math.random() * 0.450 + 0.001) * sensZ * (i + 1); cube[i].position.setX(xRandom + x); cube[i].position.setY(yRandom + y); cube[i].position.setZ(zRandom + z); cube[i].rotation.x += 0.01; cube[i].rotation.y += 0.01; } } </code></pre>