Konwersja pozycji 3D na pozycję ekranu 2D [r69!]

Potrzebuję trzech.kod js do konwersji współrzędnych obiektów 3D na współrzędne 2d w elemencie 'div', dzięki czemu mogę umieszczać etykiety tekstowe tam ,gdzie muszą być (bez tych etykiet skalujących/poruszających się / obracających wraz z ruchem 3D). Niestety, wszystkie przykłady, które widziałem i próbowałem do tej pory wydają się używać przestarzałych funkcji / technik. W moim przypadku uważam, że używam r69 z trzech.js.

Oto przykład "starszej" techniki, która po prostu generuje błędy dla ja:

Trzy.js: konwersja pozycji 3D na pozycję ekranu 2D

Oto fragment jakiegoś nowszego kodu (?) to nie zapewnia mi wystarczającego kontekstu do pracy, ale wygląda dużo czystiej:

Https://github.com/mrdoob/three.js/issues/5533

Author: Community, 2014-12-10
Source

3 answers

Napisałem dla mojego projektu następującą funkcję; otrzymuje ona instancję THREE.Object3D i kamerę jako parametry i zwraca pozycję na ekranie. 

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    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
    };

};

Następnie stworzyłem THREE.Object3D, aby utrzymać pozycję div (jest przymocowana do siatki w scenie) i w razie potrzeby można ją łatwo przekonwertować na pozycję ekranu za pomocą funkcji toScreenPosition i aktualizuje współrzędne elementu div.

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

Tutaj skrzypek z demo.

 28
Author: meirm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-08 09:05:11

Możesz przekonwertować pozycję 3D na współrzędne ekranu za pomocą wzoru: 

var vector = new THREE.Vector3();
var canvas = renderer.domElement;

vector.set( 1, 2, 3 );

// map to normalized device coordinate (NDC) space
vector.project( camera );

// map to 2D screen space
vector.x = Math.round( (   vector.x + 1 ) * canvas.width  / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * canvas.height / 2 );
vector.z = 0;
Trzy.js R. 69
 20
Author: WestLangley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-19 11:08:57

Dla mnie ta funkcja działa (trzy.js wersja 69): 

function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;

        return vector;
    }
 6
Author: Julia Savinkova,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-12 17:32:35