Three.js - 只渲染场景背景，但没有几何图形。

Question

说实话，我会把我的头发从我的头上扯下来。我真的需要帮助。我需要做的就是在这个非常简单的三.js程序中得到一些什么东西来渲染。我浪费了这么多时间，只想哭着睡觉... ...

我只能看到场景的背景色。我试过放入简单的立方体，复制粘贴的几何图形，其他项目中的几何图形都能用，乱用环境光和方向光，移动摄像机的位置。为了拯救我的生命，我不能得到一个单独的像素... ... 控制台没有出错，vs代码也没有出错，其他项目也能正常工作。就像我设定的任何一个项目，只要有灵感，都要一次次被打倒，就像打死马一样，典型的是一些很愚蠢的错误。这次这堵动态墙来到我的门前，一开始就把我挡在门外......

html是没有问题的。我说过，它能很好地渲染场景背景。它没有渲染任何阴影的几何图形。在node liveserver上运行webapp... 浏览器是完全更新的Firefox....

var context = null,
    renderer = null,
    loader = null,
    scene = null,
    camera = null;

var redSphere;
var cube;

function onLoad() {

    //CONTEXT
    context = document.getElementById("deep");
    context.style.height = "100vh";
    context.style.width = "100vw";

    //RENDERER
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);
    context.appendChild(renderer.domElement);

    //CAMERA
    camera = new THREE.PerspectiveCamera(45, context.offsetWidth/context.offsetHeight, 1, 100);
    camera.position.set(0, 0, 0);

    //SCENE
    scene = new THREE.Scene();
    scene.background = new THREE.Color("rgb(20, 0, 20)");

    //LIGHTS
    var sun1 = new THREE.AmbientLight(0xffffff, 1.0);
    var sun2 = new THREE.DirectionalLight(0xffffff, 1.0);
    var sun3 = new THREE.DirectionalLight(0xffffff, 1.0);
    sun1.position.set(0, 0, 0);
    sun2.position.set(-3, 3, 2);
    sun3.position.set(0, -3, 2);
    scene.add(sun1, sun2, sun3);



    //RED OBJECT
    var sphereGeo = new THREE.BoxGeometry(1, 1, 1);
    var redSphereMat = new THREE.MeshPhongMaterial({color: "rgb(255, 0, 0)" });//, opacity: 0.5, transparent: true
    redSphere = new THREE.Mesh(sphereGeo, redSphereMat);
    redSphere.position.set(0, 5, 0);
    scene.add(redSphere);


    draw();
}

function draw() {
    renderer.render(scene, camera);
    camera.lookAt(redSphere);

    redSphere.rotation.y -= 0.1;

    requestAnimationFrame(draw);
}

Answer 1

lookAt()需要一个Vector3作为参数，而不是一个Mesh。试试吧。

camera.lookAt(redSphere.position);