简单立方体 - 三个 JS

Question

我一直在尝试通过 Three.js 库为 WebGL 实现一个简单的旋转 3D 立方体。

与那里的大量教程相比，我似乎无法识别代码中的任何错误，但我看到的只是没有几何图形的黑屏。

//Define window size
var width = window.innerWidth;
var height = window.innerHeight;

//smoothened edges for the renderer defined
var renderer = new THREE.WebGLRenderer({antialias:true});
//renderer size
renderer.setSize(width,height);
//renderer is appended to the html document
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene;

//Add Cube - width, height, depth
var cubeGeom = new THREE.CubeGeometry(100,100,100);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x1ec876});
var cube = new THREE.Mesh(cubeGeom,cubeMaterial);

//Rotate cube 45 degrees
cube.rotation.y=Math.PI*45/180;

//Add cube to scene
scene.add(cube);

//Add Camera - FOV, Ratio, Close, Far
var camera = new THREE.PerspectiveCamera(45,width/height,0.1,10000);

//Position camera
camera.position.y = 160;

//Higher the z value, the closer to the camera/user
camera.position.z = 400;

//Camera pointed towards cube
camera.lookAt(cube.position);

//Add camera to scene
scene.add(camera);

//Define skyBox

var skyBoxGeom = new THREE.CubeGeometry(10000, 10000, 10000);
var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial);

scene.add(skyBox);

//Point Light
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0,300,200);
scene.add(pointLight);

//Render scene
function render() {
  render.render(scene,camera);

  var clock = new THREE.Clock;

  //rotate cube clockwise - subtract time passed from rotation
  cube.rotation.y -=clock.getDelta();

  requestAnimationFrame(render);
}

//Call render function
render();

canvas {
    position: fixed;
    top:0;
    left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

附言我通过在此处找到的 Google 开发人员链接上的 CDN 链接到 Three.js：https://developers.google.com/speed/libraries/

任何帮助将不胜感激。

非常感谢 汤姆

Answer 1

您的 JS 代码第 55 行有一个小错字：

render.render(scene,camera);

应该是：

renderer.render(scene,camera);

下次我强烈建议您打开浏览器的控制台，错误已被记录，因此修复错误非常简单。

---

除此之外，您的代码运行良好。立方体旋转，虽然速度很慢。您可能需要调整第 60 行以使其旋转得更快（例如，将值乘以 100）。