0

the plane is 800px width:

geometry = new THREE.PlaneGeometry( 800, 20, 0, 0 );

material = new THREE.MeshBasicMaterial({ 
    color:0xFFFFFF,
    side:THREE.DoubleSide 
});

mesh = new THREE.Mesh(geometry, material);
mesh.updateMatrixWorld();
scene.add(mesh);

when I try to manipulate it, makes the coordinate system other junk

mesh.geometry.vertices[0].setY(0);
mesh.geometry.vertices[0].setX(0);
mesh.geometry.vertices[0].setZ(0);

mesh.geometry.vertices[1].setY(0);
mesh.geometry.vertices[1].setX(800);
mesh.geometry.vertices[1].setZ(0);

mesh.geometry.vertices[2].setY(20);
mesh.geometry.vertices[2].setX(0);
mesh.geometry.vertices[2].setZ(0);

mesh.geometry.vertices[3].setY(20);
mesh.geometry.vertices[3].setX(800);
mesh.geometry.vertices[3].setZ(0);

mesh.geometry.verticesNeedUpdate = true;

I can adjust the coordinate system of the geometry object to the coordinate system of the camera frame?

0px = 0

gman
  • 100,619
  • 31
  • 269
  • 393
Philipp
  • 177
  • 1
  • 1
  • 10
  • 1
    your question is not very clear. – gaitat Jul 29 '16 at 17:44
  • I want to put individual vertices on screen coordinates. – Philipp Jul 29 '16 at 17:53
  • When you say `0px = 0` you mean making every coordinate (I'm assuimng xy since the screen doesn't have a z) in the scene line up with the screen's coordinatesL i.e. a rectangle @ (30,50,10) would be (on the screen) @ (30px, 50px) correct? – Rush2112 Jul 29 '16 at 20:05
  • Possible duplicate of [Three.js: converting 3d position to 2d screen position \[r69!\]](http://stackoverflow.com/questions/27409074/three-js-converting-3d-position-to-2d-screen-position-r69) – Wilt Jul 30 '16 at 13:05

1 Answers1

2

I apologize if this isn't what you're looking for. If you mean that you need to convert a vector3 position in the 3d world to its 2d pixel position on the screen, Here is a typical transformation:

    getScreenTranslation = function (obj, renderer, camera) {
        var vector = new THREE.Vector3();
        var widthHalf = 0.5 * renderer.context.canvas.width;
        var heightHalf = 0.5 * renderer.context.canvas.height;

        vector.setFromMatrixPosition(obj.matrixWorld);
        vector.project(camera);
        vector.x = vector.x * widthHalf + widthHalf;
        vector.y = -(vector.y * heightHalf) + heightHalf;
        return {
                x: vector.x,
                y: vector.y
        };
   };

Remember that you may need to compensate for the positioning of your canvas element within your webpage.

Radio
  • 2,810
  • 1
  • 21
  • 43