почему я не могу использовать класс OrbitControls в ThreeJS - PullRequest
Новая
       13

почему я не могу использовать класс OrbitControls в ThreeJS

0 голосов
/ 03 мая 2020

Я разрабатываю веб-систему с использованием трех. js.

Когда я пытаюсь использовать класс OrbitControls, он не работает, и у меня есть код ошибки, как показано ниже.

Может ли кто-нибудь помочь решить это дело?

Заранее спасибо.

код ошибки 

 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at new THREE.OrbitControls (OrbitControls.js:1100)
    at init (main.js:24)

код HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>threejs Test</title>
        <!-- my_css -->
        <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css">
    </head>
    <body>

    <h1>test</h1>
    <div class="canvas_wrapper">
        <canvas id="myCanvas"></canvas>
    </div>
        <!-- three.js_js -->
        <script src="static/js/three.min.js"></script>
        <script src="static/js/OrbitControls.js"></script>
        <!-- my_js -->
        <script src="static/js/main.js"></script>
    </body>
    </html>

код js

window.addEventListener('load', init);

    function init() {
      const width = 960;
      const height = 540;

      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas')
      });
      renderer.setSize(width, height);

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(45, width / height);
      camera.position.set(0, 0, 1000);

      const controls = new THREE.OrbitControls(camera);

      const mesh = new THREE.Mesh(
        new THREE.BoxGeometry(300, 300, 300),
        new THREE.MeshNormalMaterial()
      );
      scene.add(mesh);

      tick();

      function tick() {
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    }

версия: три. js r116

1 Ответ

0 голосов
/ 03 мая 2020

Это синтаксическая ошибка, которую можно исправить путем внесения некоторых изменений в код. Замените этот код: 

const controls = new THREE.OrbitControls(camera);


На этот код: 

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