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;

                    } 
                }

score 1 · Accepted Answer · edited May 23 '17 at 12:08

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!]

edited May 23 '17 at 12:08

Community

1
1

answered Aug 10 '15 at 19:46

antont

2,676
1
19
21

ok so if i want to "build" visual limits, i have to build my own, like a map and playing with z coordinate of the camera position. i could detect if my meshs reaches limit of the map or not. – mik3fly-4steri5k Aug 11 '15 at 13:13
yes - that sounds like it. you can calculate it all too with view frustums etc. but can also just find out experimenting, perhaps even using the editor. – antont Aug 12 '15 at 06:09

Positioning mesh in three.js

1 Answers1