相关疑难解决方法(0)

我是3D编程的新手,我开始用Three.JS从WebGL开始探索3D世界.

我想在更改camera.position.z和对象的"Z"位置时预先确定对象大小.

例如:我有一个大小为100x100x100的立方体网格.

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

和纵横比为1.8311874的凸轮

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

我想知道屏幕上多维数据集对象的大小(2D宽度和高度),

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

有没有办法找到它/预先确定它？

我用 Three.js 显示一个大小为 700x700 的场景。在这个场景中，我生成了一个随机位置在 -250 到 250 之间的粒子系统（对于 x,y,z），所以盒子的大小是 500x500。

为了计算相机的正确距离（为了适应盒子的全貌），我试过：

    <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;
var camera, controls, scene, renderer;
var cross;
var width = 700, height = 700;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
  // tan(pi/6) = 1/sqrt(3) = height/2 / distance_z
  camera.position.z = 250*Math.sqrt(3);

      ...

 for(var p = 0; p < particleCount; p++) {

    // create a particle with random
    // …

我有一组块对象，我想设置透视相机，使其整个宽度完全可见（高度将太大-可以，我们将上下移动）。

我已经看到许多与此相关的问题，例如：

调整相机以显示Three.js形状

Three.js-视图的宽度

THREE.JS：获取相对于摄像机和屏幕上对象位置的对象大小

如何使相机适合物体

ThreeJS。如何实现ZoomALL并确保给定的框填充画布区域？

但是，它们似乎都无法完全满足我的需求：

• 我对高度不感兴趣，仅对宽度不感兴趣（它们不会相同-大小将是动态的，但我可以假定高度将大于宽度）

• camera.position.z（或我估计的FOV）是未知的，所以我试图通过正确的方法来求解方程

（我对3D数学并不满意。在此先感谢！）

目标

我想更新摄像机位置,以便平面世界位置与DIV 屏幕位置匹配.

初步想法

我需要计算camera.position.z- 这样即使调整画布大小,飞机的面也会匹配DIV- 的大小.

this.computeZ = function(meshHandle, cameraHandle, faceHeight, targetHeight){
    var face = meshHandle.geometry.vertices[2]
    var vFOV = cameraHandle.fov * Math.PI / 180;  
    var vHeightPartial = 2 * Math.tan( vFOV / 2 );
    var p1 = faceHeight * window.innerHeight;
    var p2 = face.z * vHeightPartial;
    var p3 = targetHeight * vHeightPartial;
    var p4 = targetHeight * p2;
    var p5 = p1 + p4;
    var …

我制作了一个小 Three.js 应用程序，它将一堆圆圈从画布底部移动到顶部：

let renderer, scene, light, circles, camera;

initialize();
animate();

function initialize() {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  light = new THREE.AmbientLight();
  scene.add(light);

  circles = new THREE.Group();
  scene.add(circles);

  camera = new THREE.PerspectiveCamera(45, renderer.domElement.clientWidth / renderer.domElement.clientHeight, 1);
  camera.position.z = circles.position.z + 500;
}


function animate() {
  // Update each circle.
  Array.from(circles.children).forEach(circle => {
    if (circle.position.y < visibleBox(circle.position.z).max.y) {
      circle.position.y += 4;
    } else {
      circles.remove(circle);
    }
  });

  // Create …

我正在建立一个运行在THREE.js上的网站,以生成一个3D世界.根据电子游戏的经验,我知道他们通常使用相机视角约90度.但是,当我将THREE.js中的PerspectiveCamera设置为如此高的FOV值时,场景严重失真.在保留大视野的同时,在游戏中以某种方式消除了这种失真.这是怎么做到的？我也可以在THREE.js中这样做吗？谢谢!

这是相机的创建方式:

new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    100, 
    10000000
);

得到的图像是这样的.看看地球是如何在水平方向上拉伸的？这就是我想要摆脱的东西.