Блог

Главная - Вопросы по программированию - понять систему позиционирования в three.js

понять систему позиционирования в three.js

#javascript #html #three.js

#javascript #HTML #three.js

Вопрос:

Я новичок в javascript и three.js я пытаюсь выяснить, как получить трехмерные позиции на веб-странице. например я хочу установить точечный индикатор в (50,20,10) значениях x, y, z. как я могу узнать, где эти значения x, y, z появятся на веб-странице?.Я видел код, подобный приведенному ниже.

 var light2 = new THREE.PointLight(0xffffff, 10)
    light2.position.set(500, 100, 0)
    scene.add(light2)

Я погуглил, но не получил достаточно информации, чтобы разобраться в вещах должным образом, может кто-нибудь помочь мне хорошим объяснением или ссылкой на какую-нибудь статью / учебник?

Комментарии:

1. Что вы имеете в виду, что веб-страница имеет диапазон от -1 до 1? Вы не размещаете подсветку на веб-странице, вы помещаете ее в 3D-мир, который будет отображаться с помощью WebGL и canvas.

2. @zero298 я погуглил 3d space в Web, и это показало, что веб-страница всегда находится в диапазоне от -1 до 1. я действительно мало знаю об этом, не могли бы вы, пожалуйста, помочь мне понять 3D-пространство в Web?

Ответ №1:

Сначала просто немного предыстории…

  • Трехмерное пространство бесконечно.
  • Холст — это окно просмотра в этом пространстве.
  • Размер холста на странице не имеет прямого отношения к чему-либо в 3D пространстве. Вы можете удвоить размер холста, и все, что это делает, это увеличивает отображаемое изображение.

На ваш вопрос…

Это не значит, что вы не можете определить, где на холсте может появиться 3D-объект. Вы можете спроецировать любую точку в трехмерном пространстве в нормализованные координаты устройства с помощью Vector3.project .

 var light2 = new THREE.PointLight(0xffffff, 10)
    light2.position.set(500, 100, 0)
    scene.add(light2)

// Where is it in NDC?
var ndc = new THREE.Vector3().copy( light2.position ).project( camera );

Нормализованные координаты устройства варьируются от -1 до 1 и представляют собой нормализованную ширину и высоту окна просмотра с (0,0) точкой в центре отображаемого изображения. Итак, вам нужно будет преобразовать их из NDC в значения пикселей на вашем canvas. (Также вы можете игнорировать z компонент, потому что экран не имеет глубины.)

 var canvasX = ( ndc.x   1 ) * canvasWidth / 2;
var canvasY = ( ndc.y   1 ) * canvasHeight / -2;