无法在我的项目中使用/导入来自threejs的 GLTFLoader 和 OrbitControls答案

【问题标题】：cannot use/import GLTFLoader and OrbitControls from threejs in my project无法在我的项目中使用/导入来自threejs的 GLTFLoader 和 OrbitControls
【发布时间】：2022-02-01 06:29:49
【问题描述】：

您好，我正在尝试构建一个简单的threeJs 项目。我想用 GLTFLoader 加载一个 3dModel，但我无法导入它。然后我尝试导入 OrbitControls，我得到了同样的错误。我需要一点帮助，有人可以向我解释我做错了什么吗？如您所见，我只将必要的文件复制到了我的项目文件夹中。这是坏事吗？这就是它不起作用的原因吗？

我想指定我已经从我从 three.js 网站下载的文件夹中复制了这些文件。两个文件都来自 -three/examples/jsm/loaders/GLTFLoader.js -three/examples/jsm/controlers/OrbitControls.js

这是我的 ar.js 文件

    import * as THREE from "../scripts/three.module.js";
import { GLTFLoader } from "../scripts/GLTFLoader";
import { OrbitControls } from "../scripts/OrbitControls";

const canvas = document.getElementById("webgl");
canvas.style.width = "600";

let scene, camera, renderer;
let obj;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    0.01,
    60
  );

  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  //   /////////////// this is just a test to see if everything works/////////////////
  //   const geometry = new THREE.BoxBufferGeometry(0.3, 0.3, 0.3);
  //   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  //   const cube = new THREE.Mesh(geometry, material);
  //   cube.position.set(0, 0, -1);
  //   scene.add(cube);

  let loader = new GLTFLoader();
  loader.load(
    "../assets/3dmodel/firstPinBlue.gltf",
    function (gltf) {
      obj = gltf.scene;
      obj.scale.set(0.3, 0.3, 0.3);
      obj.position.set(0, 0, -4);
      scene.add(gltf.scene);
    },
    undefined,
    function (error) {
      console.log(error);
    }
  );

  const light = new THREE.AmbientLight();
  scene.add(light);

  window.addEventListener("resize", onWindowResize, false);
}

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

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  renderer.setAnimationLoop(render);
  controls.update();
}

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

这是我的html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Augumented Reality</title>
  </head>
  <body>
    <h1>AR</h1>
    <canvas id="webgl"></canvas>

    <script type="module" src="./three.js"></script>
  </body>
</html>

这是我的项目结构的照片 PROJECT STRUCTURE

这是我得到的错误 ERROR IMG

【问题讨论】：

标签： javascript three.js gltf threejs-editor orbitcontrols

【解决方案1】：

尝试像这样从 CDN 加载三个：

* {
  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 cameraMin = 0.0001;

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

  const scene = new THREE.Scene();

  camera.position.z = 5;

  const cube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(),
    new THREE.MeshNormalMaterial()
  );

  scene.add(cube);

  (function animate() {
    requestAnimationFrame(animate);

    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    controls.update();

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

【讨论】：