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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Three.js-仅渲染场景背景,但不渲染几何图形相关的知识,希望对你有一定的参考价值。

老实说,我会把头发从头上扯下来。我很需要帮助。我需要做的就是在这个非常简单的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);
}
答案

lookAt()需要使用Vector3作为参数,而不是Mesh。试试:

camera.lookAt(redSphere.position);

以上是关于Three.js-仅渲染场景背景,但不渲染几何图形的主要内容,如果未能解决你的问题,请参考以下文章

three.js 相关概念

Three.js 不渲染纹理

three..js在渲染方面支持的怎么样

渲染后将几何图形添加到 three.js 网格

使用vue学习three.js之渲染后期处理-使用MaskPass掩膜通道实现多个场景中地球与火星使用不同后期处理效果,不同场景的物体在同一屏幕展示,星空背景展示

Three.js:无法将背景通道与轮廓通道相结合