OrbitControl無法加載文件

這段代碼基本上顯示了一個3D文件(obj,stl,3mf),由用戶使用三個js OBJLoader,STLLoader和3MFLoader輸入。所有的工作都很好,但我嘗試了一些(在這段代碼中)添加軌道控制,以便用戶可以放大、縮小、旋轉等文件,但它似乎不起作用。控制臺沒有任何錯誤,但旋轉、放大和縮小等操作與渲染效果不一樣。

<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>

有人能檢查一下代碼并告訴我為什么它不工作以及如何修復它嗎?

? 最佳回答:

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 );
主站蜘蛛池模板: 天堂资源中文最新版在线一区 | 精品乱码一区二区三区在线| 日韩免费一区二区三区在线播放| 中文字幕人妻丝袜乱一区三区| 国产在线步兵一区二区三区| 亚洲AV无码一区二区三区国产 | 久久人妻无码一区二区 | 乱人伦一区二区三区| 日韩一区二区在线观看| 亚洲av午夜福利精品一区| 亚洲AV成人精品一区二区三区 | 日韩精品一区二区三区中文3d| 亚洲av永久无码一区二区三区| 国产精品成人一区无码 | 色天使亚洲综合一区二区| 黑人大战亚洲人精品一区| 亚洲国产一区在线观看| 国产麻豆媒一区一区二区三区| ...91久久精品一区二区三区| 日韩在线视频不卡一区二区三区| 福利一区国产原创多挂探花| 亚洲大尺度无码无码专线一区| 精品国产日韩一区三区| 亚洲一区二区三区高清不卡| 日韩av片无码一区二区三区不卡| 在线精品亚洲一区二区| 一本大道东京热无码一区 | 97精品国产福利一区二区三区| 无码人妻精品一区二区蜜桃| 久久人妻av一区二区软件| 亚洲综合无码AV一区二区| 中文字幕一区二区三区乱码| 国产一区二区在线视频播放| 精品人妻少妇一区二区三区不卡 | 亚洲无码一区二区三区| 精品国产一区二区三区在线| 色久综合网精品一区二区| 亚洲日韩AV一区二区三区四区| 日韩精品中文字幕无码一区| 久久毛片一区二区| 糖心vlog精品一区二区三区|