Positioning mesh in three.js

Question

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 ?

And what is the relation between the canvas width , height and meshs on in the canvas?

Thanks.

            var geometry = new Array(),material = new Array(),cube = new Array();
            var i = 0; 
            for(i=0; i < 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 < cube.length ; i++) {

                    document.getElementById('widthHeight').innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> 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();

i added a PlaneGeometry and some tests to detect if cubes reach limit x or y of the new PlaneGeometry.

 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 < 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 < cube.length ; i++) {

                    if (cube[i].geometry.type == "BoxGeometry") {

                        widthHeight.innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> 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 >= ((map.geometry.parameters.width / 2) - widthCube)) {
                            sensX = -1;
                        }
                        if (x <= ((map.geometry.parameters.width / 2) - widthCube)*-1) {
                            sensX = 1;
                        }
                        if (y >= ((map.geometry.parameters.height / 2) - heightCube)) {
                            sensY = -1;
                        }
                        if (y <= ((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;

                    } 
                }

Answer 1

In three.js you are working with a 3D space, the scene. The x,y,z coordinates are in that space. Similar to the real world, you can think of it as a room with some objects in it.

What gets shown on the canvas in 2D is how your camera sees a particular view to that scene. You can observe this by modifying the z coordinate of the camera position which you have in your code. This is again similar to taking a photo with a real camera of a room with some objects.

So the relation of the 3D object position and where they show in the canvas depend on the camera view. Three.js can tell you where some 3D position is projected in the 2D view -- for details and an example, see the answer there: Converting 3D position to 2d screen position [r69!]