相关疑难解决方法(0)

我正在开发一款展示3D模型的应用程序.我们加载模型,创建网格,将它们添加到场景......标准程序.添加最后一个网格后,我们计算边界框以移动相机并覆盖所有场景,使用总几何的大小和视口的大小来进行数学运算.

    if (bounds.bx / bounds.by < camera.aspect) {
        /* Vertical max */
        r = bounds.by / (2 * Math.tan(Math.PI / 8));
    } else {
        /* Horizontal max */
        hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
        r = bounds.bx / (2 * Math.tan((hFOV / 2)));
    }

bounds是包含边界框宽度和高度的对象.在这个计算之后,我们移动相机(加上一点比例,只是美学,我们想要在几何和屏幕边框之间有一点空间:))并渲染

    camera.position.z = r * 1.05;

到目前为止,这已实施并运行正常.这已经通过PerspectiveCamera完成.现在我们要改变它并使用OrthographicCamera ......结果是一团糟.模型太小,我们失去了TrackBall控件的鼠标滚轮缩放功能,移动相机的算法不再适用.另外我不明白摄像机构造函数的参数......这些宽度和高度是几何体还是视口？

我找到了有关如何使用 THREE.js在等距相机中创建（轴测）等距相机的示例，但是如何创建轴测斜线？

我有这个 Codepen 演示：Codepen 演示链接，我想将其转换为比本网站英雄部分的背景效果：网站链接

以下是可能使这一点更清楚的图像：

这：

改成这样：

我真的不知道该怎么办！如果有人可以帮助我，甚至创造一支新笔，那就太棒了！

太感谢了。

这是 Codepen 演示的 JavaScript 代码：

/**/ /* ---- CORE ---- */
/**/ const mainColor = '#070707',
/**/       secondaryColor = '#FF7F16',
/**/       bgColor = '#ffae1e';
/**/ let windowWidth = window.innerWidth,
/**/     windowHeight = window.innerHeight;
/**/ class Webgl {
/**/   constructor(w, h) {
/**/     this.meshCount = 0;
/**/     this.meshListeners = [];
/**/     this.renderer = new THREE.WebGLRenderer({ antialias: true });
/**/     this.renderer.setPixelRatio(window.devicePixelRatio);
/**/     this.renderer.setClearColor(new THREE.Color(bgColor));
/**/     this.scene = new THREE.Scene();
          // …