Three.js: geometry.addEventListener 不是函数

Question

我一直在摆弄 Threejs 试图让我的海腿，但我运行早在我预期之前就遇到了一个问题，我不知道是否有我的代码中的错误或框架中的错误（我假设是我的）。

我想在按下按钮时用另一个对象替换一个对象。我的测试代码（如下）在初始加载时加载了一个立方体，我希望在按下按钮时用球体替换它。然而，这并没有发生，而是我收到了错误：

TypeError: geometry.addEventListener is not a function
geometry.addEventListener( 'dispose', onGeometryDispose );

我的html：

<!doctype html>
<html lang="en">
<head>
  <title>My test</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
  <script src="OrbitControls.js"></script>
  <script>
      var WIDTH = 500,
         HEIGHT = 500;
      var scene = new THREE.Scene();
      var aspect = WIDTH / HEIGHT;
      var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
      camera.position.set(0,0,5);
      scene.add(camera);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( WIDTH , HEIGHT );
      document.body.appendChild( renderer.domElement );

      var geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
      var material = new THREE.MeshNormalMaterial(); 
      var cube = new THREE.Mesh( geometry, material ); 
      scene.add( cube ); 

      controls = new THREE.OrbitControls(camera, renderer.domElement);

      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
      }
      animate();


    </script>
    <div>
        <button onclick="updateThing();">Update Thing</button>
    </div>
</body>
<script src="scripts.js" type="text/javascript" charset="utf-8"></script>
</html>

我在按下按钮时进行更改的函数：

function updateThing() {
    scene.remove(cube)
    var pos = new THREE.Vector3(0, 0, 0); 
    var geo = new THREE.Sphere(pos, parseFloat(1.4));
    var mat = new THREE.MeshNormalMaterial();
    sphere = new THREE.Mesh( geo, mat );
    scene.add( sphere );
}

我是不是做错了什么？

轨道控制可以在这里找到：https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

Answer 1

我相信您正在寻找 THREE.SphereGeometry 而不是 THREE.Sphere:

var geo = new THREE.SphereGeometry(parseFloat(1.4));

参见文档 here and here。

Three.js: geometry.addEventListener 不是函数

Three.js: geometry.addEventListener is not a function

javascript

three.js