javascript - 我无法渲染基本球体

Question

我一直在关注本教程:https://www.youtube.com/watch?v=6oFvqLfRnsU为了在 Three.js 中渲染基本形状。 18:20，他的场景中出现了一个球体。

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
    camera.position.z = 5;
  var renderer = new THREE.WebGLRenderer({antialias: true});

  renderer.setClearColor("#e5e5e5");
  renderer.setSize(window.innerWidth, window.innerHeight);

  window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  })

  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.SphereGeometry(1,10,10);
  var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
  var mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);

  renderer.render(scene, camera);

我的场景似乎正在渲染，因为我有浅灰色背景，但我无法显示黑色球体

Answer 1

您的代码中有一个拼写错误:varcamera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHiegt, 0.1, 1000);

window.innerHeight 必须是window.innerHeight

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
})



var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var geometry = new THREE.SphereGeometry(1, 10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0xFFCC00
});
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer.render(scene, camera);

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>