三。

发布于 2025-01-22 06:32:48 字数 1613 浏览 3 评论 0原文

我正在尝试将一个3D设计文件（GLTF）实现到具有three.js的网站中，并且我一直在遇到此错误：

这是html/javascript/css code：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="test2.css" />
  </head>
  <body>
    <script src="../three_import/three.min.js"></script>
    <script src="../three_import/OrbitControls.js"></script>
    <script src="../three_import/GLTFLoader.js"></script>
    
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        let loader = new THREE.GLTFLoader();
        loader.load('../Image/USB.gltf', function(gltf){
          car = gltf.scene.children[0];
          car.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

我不知道这个错误可能来自什么，而且我尝试了其他人提供的一切，但它不起作用。

谢谢

原文

I'm trying to implement a 3d design file (gltf) into a website with three.js and I'm keeping having this error:

Here is the html/Javascript/CSS code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="test2.css" />
  </head>
  <body>
    <script src="../three_import/three.min.js"></script>
    <script src="../three_import/OrbitControls.js"></script>
    <script src="../three_import/GLTFLoader.js"></script>
    
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        let loader = new THREE.GLTFLoader();
        loader.load('../Image/USB.gltf', function(gltf){
          car = gltf.scene.children[0];
          car.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

I have no idea what this error could come from, and I've tried everything given in othersites and it doesn't work.

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一杆小烟枪 2025-01-29 06:32:48

好吧，这是真的：您的主脚本标签是类型text/javaScript，而不是module。

在您的html中，您不要需要：

<script src="../three_import/three.min.js"></script>
<script src="../three_import/OrbitControls.js"></script>
<script src="../three_import/GLTFLoader.js"></script>

相反，您将对主脚本 tag：

<script type="module">
import * as THREE from '../three_import/three.min.js';
import {OrbitControls} from '../three_import/OrbitControls.js';
import {GLTFLoader} from '../three_import/GLTFLoader.js';
//Your code here
</script>

请记住，由于我们正在这样做，而不是做new Trix.orbitControls（）或new Trix.gltfloader（），我们将使用new OrbitControls（）< /code>和new Gltfloader（）。（没有三个）

就是这样！

Well, this is true: Your main script tag is of type text/javascript, not module.

In your HTML, you don't need:

<script src="../three_import/three.min.js"></script>
<script src="../three_import/OrbitControls.js"></script>
<script src="../three_import/GLTFLoader.js"></script>

Instead, you would do this to your main script tag:

<script type="module">
import * as THREE from '../three_import/three.min.js';
import {OrbitControls} from '../three_import/OrbitControls.js';
import {GLTFLoader} from '../three_import/GLTFLoader.js';
//Your code here
</script>

Remember, since we are doing this, instead of doing new THREE.OrbitControls() or new THREE.GLTFLoader(), we would use new OrbitControls() and new GLTFLoader(). (without the THREE)

That's all!

回复收藏 0 原文

~没有更多了~