OrbitControls 不适用于加载文件

Question

所以我有这段代码，它基本上显示了用户使用三个 js OBJLoader、STLLoader 和 3MFLoader 输入的 3D 文件（obj、stl、3mf）。一切正常，但我尝试了一些（在此代码内）向此添加 OrbitControls，以便用户可以使用文件放大、缩小、旋转等，但它似乎不起作用。控制台完全没有错误，但旋转、放大和缩小等在渲染时效果不佳。

<input type="file" name="file" id="file" onchange="loadFile(event)" />
<div id="filePreview" style="width: 100%; height: 30vh"></div>
<script>
  var loadFile = function (event) {
    let oInput = document.getElementById("file");
    var _validFileExtensions = [".obj", ".stl", ".3mf"];
    function ValidateSingleInput() {
      if (oInput.type == "file") {
        var sFileName = oInput.value;
        if (sFileName.length > 0) {
          var blnValid = false;
          for (var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            if (
              sFileName
                .substr(
                  sFileName.length - sCurExtension.length,
                  sCurExtension.length
                )
                .toLowerCase() == sCurExtension.toLowerCase()
            ) {
              window.fileUrl = URL.createObjectURL(event.target.files[0]);
              var scene = new THREE.Scene();

              var camera = new THREE.PerspectiveCamera(
                75,
                window.innerWidth / window.innerHeight,
                0.1,
                1000
              );

              var renderer = new THREE.WebGLRenderer();

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

              camera.position.z = 200;
              controls.update();

              var scene = new THREE.Scene();

              var camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                1,
                2000
              );
              camera.position.z = 250;
              camera.lookAt(scene.position);
              controls.update();

              var directionalLight = new THREE.DirectionalLight(0xffeedd);
              directionalLight.position.set(0, 0, 1).normalize();
              scene.add(directionalLight);

              var mesh = null;
              if (sCurExtension == ".obj") {
                var objLoader = new THREE.OBJLoader();
                objLoader.load(window.fileUrl, function (object) {
                  mesh = object;
                  mesh.position.y = -50;
                  scene.add(mesh);
                });
              } else if (sCurExtension == ".3mf") {
                var loader = new THREE.ThreeMFLoader();
                loader.load(window.fileUrl, function (object) {
                  mesh = object;
                  mesh.position.y = -50;
                  scene.add(mesh);
                });
              } else if (sCurExtension == ".stl") {
                var loader = new THREE.STLLoader();
                loader.load(window.fileUrl, function (geometry) {
                  var material = new THREE.MeshPhongMaterial({
                    specular: 0x111111,
                    shininess: 200,
                    shading: THREE.FlatShading,
                  });
                  mesh = new THREE.Mesh(geometry, material);
                  mesh.position.y = -50;
                  scene.add(mesh);
                });
              }

              renderer.setPixelRatio(window.devicePixelRatio);
              renderer.setSize(
                filePreview.offsetWidth,
                filePreview.offsetHeight
              );

              renderer.setClearColor(0x000000);
              document.body.appendChild(renderer.domElement);

              animate();

              function animate() {
                requestAnimationFrame(animate);

                controls.update();

                renderer.render(scene, camera);
              }

              filePreview.appendChild(renderer.domElement);
              blnValid = true;
              break;
            }
          }

          if (!blnValid) {
            alert(
              "Sorry, " +
                sFileName +
                " is invalid, allowed extensions are: " +
                _validFileExtensions.join(", ")
            );
            oInput.value = "";
            return false;
          }
        }
      }
      return true;
    }

    ValidateSingleInput();
  };
</script>

<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/3MFLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>

任何人都可以检查代码并告诉我为什么它不起作用以及如何修复它吗？

Answer 1

OrbitControls 不作为 Three.js 库的一部分直接导出；相反，它作为 examples.

的一部分导出

如果您使用的是捆绑器（例如 WebPack），您可以像这样导入它：

// Typical Three.js import
import * as THREE from "three"

// Additional OrbitControls import
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

或者，如果您使用的是脚本导入，则可以使用：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
  import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js";

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  const controls = new OrbitControls(camera, renderer.domElement);

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

  camera.position.z = 5;

  (function animate() {
    requestAnimationFrame(animate);

    controls.update();
    renderer.render(scene, camera);
  })();
</script>

那么你可以这样使用它：

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

OrbitControls 不适用于加载文件

OrbitControls not working with Loading file

html

javascript

3d

three.js