Three.js:geometry.addEventListener不是函数

Three.js: geometry.addEventListener is not a function

本文关键字：函数 addEventListener geometry js Three      更新时间：2023-09-26

我一直在摆弄Threej，试图获得我的Sealegs，但我早在预期之前就遇到了问题，我不知道我的代码中有错误还是框架中有错误（我认为这是我的）。

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

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

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

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

请参阅此处和此处的文档。

相关文章：