3D-координаты на экране не работают должным образом три секунды [r100] - PullRequest
Новая
       49

3D-координаты на экране не работают должным образом три секунды [r100]

0 голосов
/ 05 марта 2019

У меня есть эта действительно простая тестовая сцена, чтобы разместить несколько html-меток на позиции 3d-объекта в моей сцене.Но когда я пытаюсь преобразовать 3d-координаты в местоположение на экране, я получаю странные значения, которые совсем не соответствуют положению моего 3d-объекта.Ниже приведен код, с помощью которого я генерирую сцену и размещаю метку: 

var CanvasContainer = document.getElementById("KettingContainer");

function CameraSetup(container){
    var camera = new THREE.PerspectiveCamera( 50, container.offsetWidth / container.offsetHeight, 1, 300 );
    camera.position.set( 0, 0, 100 );
    camera.lookAt( 0, 0, 0 );
    return camera;
}

function SceneSetup(){
    var scene = new THREE.Scene();
    return scene;
}

function RenderSetup(container) {
    var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.autoClear = false;
    renderer.setClearColor( 0x000000, 0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( container.offsetWidth, container.offsetHeight );
    container.appendChild( renderer.domElement );
    return renderer;
}

function OnWindowResize(container){
    camera.aspect = container.offsetWidth / container.offsetHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( container.offsetWidth, container.offsetHeight );
}

var kraalLabels = document.getElementById('kraalLinkLabels').getElementsByTagName('div');

function Animate(){
    requestAnimationFrame(Animate);

    Render();
}

function Render(){
    renderer.render( scene, camera );
}

function createScreenVector(pos, camera, width, height) {
    const hw = width/2, hh = height/2;
    var pos2d = pos.clone();
    pos2d.project(camera);
    console.log(pos2d);
    pos2d.x = ( pos2d.x * hw ) + hw;
    pos2d.y = - ( pos2d.y * hh ) + hh;

    return pos2d;
}

function positionLabels(positions, camera, width, height){
    for( var i = 0; i < kraalLabels.length; i++ )
    {
        const d = createScreenVector(positions, camera, width, height);
        kraalLabels[i].style.left = d.x + "px";
        kraalLabels[i].style.top = d.y + "px";
    }
}

var camera = CameraSetup(CanvasContainer);
var scene = SceneSetup();
var renderer = RenderSetup(CanvasContainer);

console.log("fc: ", camera.position);

const geometry = new THREE.SphereGeometry( 10, 32, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
let sphere = new THREE.Mesh( geometry, material );
sphere.position.set(20, 20, 0.1);
scene.add( sphere );

positionLabels(new THREE.Vector3(20, 20, 0.1), camera, CanvasContainer.offsetWidth, CanvasContainer.offsetHeight);

window.addEventListener("resize", function(){ OnWindowResize(CanvasContainer); }, false);
Animate();

См. Ниже снимок экрана с расположением камеры, размером контейнера холста и расположением экрана для каждой из меток:

fc is the position of the camera

Как видите, позиции надписей намного больше, чем сам холст.И все позиции отрицательные ...

Даже мой объект находится чуть выше и левее центра экрана ..

Я полностью застрял в этомраз я понятия не имею, что я делаю неправильно :(

Если нужна дополнительная информация, я с удовольствием уточню!

1 Ответ

1 голос
/ 05 марта 2019

После поиска решения для часов в часы, я наконец нашел проблему, прежде чем вы vector3.project(camera); должны обновить матрицу камеры следующим образом: camera.updateMatrixWorld(); это решит проблему со странными значениями.

Надеется, что это поможет кому-то в будущем!

...