8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

我需要帮助,为什么我的 three.js 代码无法运行

monkey0506 2月前

22 0

我想学习 three.js 并尝试按照 three.js 文档中的入门代码进行操作,但是场景没有渲染,我完全不知所措。index.html: &l...

我想学习 three.js 并尝试按照 three.js 文档中的入门代码进行操作,但场景没有渲染,我完全不知所措。

索引.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <h1>My first three.js app</h1>
        <style>
            body { 
                margin: 0; 
            }
        </style>
        <script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/examples/jsm/"
              }
            }
          </script>
    </head>
    <body>
        <script  type="module" src="/main.js"></script>
    </body>
</html>

主程序:

import * as THREE from 'three';

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

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

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

我不知道哪里出了问题,但唯一显示的是标题。请帮忙!

帖子版权声明 1、本帖标题:我需要帮助,为什么我的 three.js 代码无法运行
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由monkey0506在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您在控制台中看到任何错误了吗?因为我可以运行您的代码并看到旋转的绿色方块。另外,也许可以发布您的 package.json?它应该依赖于 \'three\' 包。

  • 您在导入地图时语法有误。这不是我们标记库版本的方式。我们没有将版本号( 可能有点令人困惑,因为它们在文档中呈现了它…… )括在尖括号中 <> 。像这样就可以了: v0.167.1 或者 0.167.1 不能 像这样: <v0.167.1> .

    <script type="importmap">
                {
                  "imports": {
                    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
                    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
                  }
                }
    </script>
    

    尝试这种方法:

    <script type="importmap">
                {
                  "imports": {
                    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
                    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
                  }
                }
        </script>
        </head>
        <body>
            <script  type="module">
    import * as THREE from 'three';
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    
    camera.position.z = 5;
    
    function animate() {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scene, camera );
    }
    renderer.setAnimationLoop( animate );
    
    </script>
返回
作者最近主题: