Three.js 摄像机&x27；扭转'；在3.js中_Three.js

Three.js 摄像机&x27；扭转'；在3.js中

three.js

Three.js 摄像机&x27；扭转'；在3.js中,three.js,Three.js,我试图掌握three.js的基本知识，但不明白为什么相机会这样，也不知道如何修复它这里有一个非常简单的测试设置，我正在使用，剥离回到赤裸裸的骨骼 HTML只是： <html> <body> <canvas id="canvas" width="1000" height="500"></canvas> <script type="module" s

我试图掌握three.js的基本知识，但不明白为什么相机会这样，也不知道如何修复它

这里有一个非常简单的测试设置，我正在使用，剥离回到赤裸裸的骨骼

HTML只是：

<html>
<body>
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script type="module" src="test-camera.js"> </script>
</body>
</html>

所以它只是飞机上的一个盒子，上面有摄像头。（可能出现什么问题？？）

我想移动相机以从不同角度查看长方体-因此，只要camera.lookAt保持指向（0,0,0），更改camera.position.set（）参数“应该”就可以使其正常工作？但如果我沿着负y轴（此代码将摄影机设置为（0，-20,2）），而不是头部，则摄影机似乎会扭曲，因此场景看起来是旋转的

我知道，默认情况下，摄影机开始沿z轴查看，x轴标题从左到右，y轴标题从下到上，因此我了解了为什么摄影机的这个特定位置会使场景看起来像我想要的那样

但是如何让摄像机保持飞机“下降”？仅举一个例子，我想将相机移动到（20,0,2），并且z轴仍指向画布上

顺便说一句，这与用户移动相机、轨道控制等无关——我只是想了解如何让代码生成我想要的视图

我怀疑我错过了一些基本的东西。。。有什么建议吗？

好的，我终于找到了camera.up，当然，它完全解决了问题。我不知道为什么我没有在我看过的任何示例代码中看到这一点，但这正是我想要的

为清晰起见，如果（如上面的示例所示）我的x-y平面是地面，则设置

camera.up=new THREE.Vector3（0,0,1）

可确保渲染时z轴在场景中始终朝上

import * as THREE from 'https://unpkg.com/three@0.122.0/build/three.module.js'

async function main() {
    // Scene
    var scene = new THREE.Scene();

    // Camera
    const camera = new THREE.PerspectiveCamera(45, 2, 0.1, 500);
    camera.position.set(0, -20, 2);
    camera.lookAt(0, 0, 0);

    // Plane
    const pGeometry = new THREE.PlaneGeometry(50, 50);
    const pMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(pGeometry, pMaterial);
    scene.add(plane);

    // Mesh
    const mGeometry = new THREE.BoxGeometry(10, 10, 10);
    const mMaterial = new THREE.MeshStandardMaterial({
        color: 0xff0000
    });
    var mesh = new THREE.Mesh(mGeometry, mMaterial);
    scene.add(mesh);

    // AmbientLight
    var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    // renderer
    const canvas = document.querySelector('#canvas');
    var renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setSize(1000, 500, false);
    renderer.render(scene, camera);
}

main().catch((e) => {
    console.error('error:', e);
});