Javascript Three.js-仅渲染场景背景,不渲染几何体
我会诚实地把我的头发扯下来。我真的需要帮助。我所需要做的就是在这个非常简单的three.js程序中渲染一些东西/任何东西。我浪费了这么多时间,只想哭着睡觉 我只能看到场景的背景色。我试着放进简单的立方体,复制粘贴的几何体,其他项目中的几何体,与环境光和平行光混在一起,移动相机的位置。为了救我的命,我无法得到一个清晰的像素。。没有控制台错误,vs代码中没有错误,其他项目工作正常。这就像我开始着手做的任何一个项目,受到启发,都必须一次又一次地被击败,就像击败一匹死马一样,通常是一些非常愚蠢的错误。这堵充满活力的墙这次来到了我的前门,从一开始就把我挡在里面 html很好。正如我所说,它渲染的场景背景刚刚好。它不会渲染任何着色几何体。正在节点liveserver上运行webapp。。。浏览器已完全更新FirefoxJavascript Three.js-仅渲染场景背景,不渲染几何体,javascript,three.js,Javascript,Three.js,我会诚实地把我的头发扯下来。我真的需要帮助。我所需要做的就是在这个非常简单的three.js程序中渲染一些东西/任何东西。我浪费了这么多时间,只想哭着睡觉 我只能看到场景的背景色。我试着放进简单的立方体,复制粘贴的几何体,其他项目中的几何体,与环境光和平行光混在一起,移动相机的位置。为了救我的命,我无法得到一个清晰的像素。。没有控制台错误,vs代码中没有错误,其他项目工作正常。这就像我开始着手做的任何一个项目,受到启发,都必须一次又一次地被击败,就像击败一匹死马一样,通常是一些非常愚蠢的错误。这
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()需要矢量3作为参数,而不是网格。尝试:
camera.lookAt(红圈位置)代码>更具体地说,是一个3.Vector3;):)