Three.js: Получить размер объекта относительно камеры и позиции объекта на экране -- three.js пол Связанный проблема

THREE.JS: Get object size with respect to camera and object position on screen


20
vote

проблема

русский

Я новичок в 3D-программировании, я начал исследовать 3D World из WebGL с Three.js.

Я хочу предопределить размер объекта, пока я меняю камеру. PPOSITION.Z и объект «Z» позиции.

Например: У меня есть сетка кубика по размеру 100x100x100.

 <код> cube = new THREE.Mesh(         new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),              new THREE.MeshFaceMaterial()     );   

и cam с соотношением сторон 1.8311874

 <код> camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );   

Я хочу знать размер (2D ширина и AMP; высота) этого куба на экране, когда,

 <код> camera.position.z = 750; cube.position.z = 500;   

Есть ли способ найти его / предопределить его?

Английский оригинал

I am newbie to 3D programming, I did started to explore the 3D world from WebGL with Three.JS.

I want to predetermine object size while I change the camera.position.z and object's "Z" position.

For example: i have a cube mesh at size of 100x100x100.

cube = new THREE.Mesh(         new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),              new THREE.MeshFaceMaterial()     ); 

and cam with aspect ratio of 1.8311874

camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 ); 

I want to know size (2D width & height) of that cube object on screen when,

camera.position.z = 750; cube.position.z = 500; 

Is there is any way to find it/predetermine it?

</div
  

Список ответов

37
 
vote
vote
Лучший ответ
 

Вы можете выделить видимую высоту для данного расстояния от камеры, используя формулы, объясненные в Three.js - ширина зрения .

 <код> var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height   

В вашем случае камера FOV 45 градусов, поэтому

 <код> vFOV = PI/4.    

(ПРИМЕЧАНИЕ: в Three.js в поле зрения камеры FOV - это вертикальный , а не горизонтальный.)

Расстояние от камеры к передней лицевой стороне (важно!) куба составляет 750 - 500 - 50 = 200. Следовательно, видимая высота в вашем случае составляет

 <код> height = 2 * tan( PI/8 ) * 200 = 165.69.   

Поскольку передняя поверхность куба составляет 100 х 100, фракция видимой высоты, представленной кубом, представляет собой

 <код> fraction = 100 / 165.69 = 0.60.   

Так что, если вы знаете высоту холста в пикселях, то высота куба в пикселях составляет в 0,60 раза.

Ссылка I предоставлена, показывает, как вычислять видимую ширину, чтобы вы могли сделать этот расчет аналогичным образом, если вам это нужно.

 

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js - Width of view.

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height 

In your case the camera FOV is 45 degrees, so

vFOV = PI/4.  

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is

height = 2 * tan( PI/8 ) * 200 = 165.69. 

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is

fraction = 100 / 165.69 = 0.60. 

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

</div
 
 

Связанный проблема

1  Three.js - переместить камеру внутри геометрии трубки  ( Three js move camera inside tube geometry ) 
в геометрии трубки 3D сцены построена загрузкой 200 баллов в виде данных JSON из внешнего файла JavaScript. Ниже приведен полный код: <код> ...

0  Свет на плоских лицах тетраэдра не просто  ( Light on flat faces of a tetrahedron is not plain ) 
Этот скрипт имеет коробку и тетраэдр. Я хочу, чтобы лица тетраэдра были освещены, как грани коробки. Но они горит по-другому. Я хочу, чтобы это было на ht...

15  Как помешать PreservedRawingBuffer в Three.js?  ( How to toggle preservedrawingbuffer in three js ) 
В принципе, я хочу установку, где я мог пойти к PreservedRawingBuffer = True, оказывайте сцену один раз, возьмите скриншот и вернитесь. Тем не менее, это пред...

1  Текущее состояние холста в IE (2012), каковы рекомендуемые альтернативы?  ( Current state of canvas in ie2012 what are the recommended alternatives ) 
Эта нить 6 месяцев Холст анимация для работы в IE надеялся, что может быть обновление или рекомендуемая наилучшая практика, чтобы убедиться, что анимации ...

2  Рендерер работает две программы и высокие вершины / лица  ( Renderer running two programs and high vertices faces ) 
Я разрабатываю небольшую игру в трижды и наткнулся на проблему, я, кажется, не понимаю. Я создаю экземпляр игры, после того, как я загружаю своих врагов, ко...

1  Рисовать шаблон на форме трехэй  ( Draw pattern on a threejs shape ) 
Я пытался без успеха, чтобы нарисовать форму с рисунком на нем с помощью Three.js. Пока я добрался до этого: <код> var s = 0.25; var sqLength = 80; var squa...

10  Загрузка объекта как геометрия вместо буфергеометрии в 3  ( Loading object as geometry instead of buffergeometry in threejs ) 
Я пытаюсь загрузить <код> .stl файл в три.js. Все работает хорошо, и я получаю модель как буфергеометрию, используя этот код: <код> var loader = new TH...

1  Почему я все еще получаю Gimbal Lock в Three.js со следующим кодом, который использует кватернионы?  ( Why am i still getting gimbal lock in three js with the following code that util ) 
Я пытаюсь иметь орбиту камеры вокруг произвольной оси в мировом пространстве. Я уже потратил так много часов, пытаясь решить эту проблему без удачи. Я не хочу...

1  Вращение в центре модели после перемещения (кастрюля) модели  ( Rotation about models center after moving pan the model ) 
Я использую Three.js, чтобы загрузить модель JSON с помощью JSсогрузчика. Я также использую TrackballControls.js для базового взаимодействия. Вращение работае...

0  Cubecamera.js рендеринг черного / ничего  ( Cubecamera js rendering black nothing ) 
Я пытался практически все, и код, кажется, совершенно действительным. Я попытался изменять версию TrieJS, изменив из мешфонматериала в MeshBasicMaterial и обр...

1  Three.js, центральная камера для просмотра всех объектов, находящихся в сцене  ( Three js center camera to view all objects that is in the scene ) 
Я пишу алгоритм, который может взорваться (сложить и разворачивать) механический, установленный двойным щелчком, затем. Но я хочу переместить камеру назад и...

0  две текстуры (холст) для одного материала в самолет  ( Two texturescanvas for one material to plane ) 
Как применить две текстуры на один материал? Есть два равных размера холста. Надо сначала текстура - это значение по умолчанию, а вторая сверху, но меньшее и ...

1  Three.js рендеринг глубины от текстуры  ( Three js render depth from texture ) 
Можно ли каким-то образом рендерировать к буфере глубины из предварительно отображаемой текстуры? Я предварительно рендеринг сцены, как оригинальные резиден...

0  Three.js Текстура нагрузки в небольшом разрешении, одинаковую картинку масштабировали тормоза. Сцена (небольшое изображение около 600x600px, масштабировано до около 1400 пикселей)  ( Three js texture loads in small resolution same picture scaled up brakes the sc ) 
У меня довольно странное поведение с Two.js, когда я пытаюсь загрузить разные текстуры для карты Cube окружающей среды. Все работает нормально, пока не стараю...

0  Три .js Импортирующие текстуры  ( Three js importing textures ) 
Я использую Three.js и теперь имею сцену с полом и автомобилем, как загружена JSON. Все хорошо, но машина просто черный , а не с текстурой из блендера. Ест...

Связанный проблема

1  Three.js - переместить камеру внутри геометрии трубки 
0  Свет на плоских лицах тетраэдра не просто 
15  Как помешать PreservedRawingBuffer в Three.js? 
1  Текущее состояние холста в IE (2012), каковы рекомендуемые альтернативы? 
2  Рендерер работает две программы и высокие вершины / лица 
1  Рисовать шаблон на форме трехэй 
10  Загрузка объекта как геометрия вместо буфергеометрии в 3 
1  Почему я все еще получаю Gimbal Lock в Three.js со следующим кодом, который использует кватернионы? 
1  Вращение в центре модели после перемещения (кастрюля) модели 
0  Cubecamera.js рендеринг черного / ничего 
1  Three.js, центральная камера для просмотра всех объектов, находящихся в сцене 
0  две текстуры (холст) для одного материала в самолет 
1  Three.js рендеринг глубины от текстуры 
0  Three.js Текстура нагрузки в небольшом разрешении, одинаковую картинку масштабировали тормоза. Сцена (небольшое изображение около 600x600px, масштабировано до около 1400 пикселей) 
0  Три .js Импортирующие текстуры