Three.js - 仅渲染场景背景但不渲染几何图形

Posted 2023-02-27

【中文标题】Three.js - 仅渲染场景背景但不渲染几何图形

【英文标题】：Three.js - Only renders scene background but no geometry

【发布时间】：2020-08-20 20:49:34

【问题描述】：

我会诚实地把头发从头上扯下来。我严重需要帮助。我需要做的就是在这个非常简单的 three.js 程序中渲染一些东西/任何东西。浪费了这么多时间，只想哭着睡觉……

我只能看到场景的背景颜色。我尝试放入简单的立方体，复制粘贴的几何图形，从其他可行的项目中获取几何图形，弄乱环境光和定向光，移动相机位置。为了挽救我的生命，我无法获得单个不同的像素。没有控制台错误，vs 代码中没有错误，其他项目工作正常。就像我开始从事的任何受启发的项目都必须一次又一次地被打败，就像打死马一样，通常会犯一些非常愚蠢的错误。这堵动态墙这次来到了我的前门，一开始就把我挡在了门外……

html 很好。正如我所说，它可以很好地渲染场景背景。它不会渲染任何阴影几何图形。在节点 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);

【参考方案1】：

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

camera.lookAt(redSphere.position);

【讨论】：

更具体地说是一个 THREE.Vector3 ;) :)