首次使用three.js加载obj模型未成功

- 日理万妓 2022-10-30 10:27 14阅读 0赞

接此，[https://blog.csdn.net/bcbobo21cn/article/details/110676331][https_blog.csdn.net_bcbobo21cn_article_details_110676331]

基本代码如下；

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>第一个three.js 示例</title>
      <style>
        body {
          margin: 0;
          overflow: hidden;
        }
      </style>
      <script src="three.js-master/build/three.js"></script>
      <script src="three.js-master/build/three.module.js"></script>
      <script src="three.js-master/examples/js/loaders/OBJLoader.js"></script>
    </head>
    
    <body>
      <script>
    
        var scene = new THREE.Scene();
    
    
        var loader = new OBJLoader();
    
                loader.load( './3d/worker.obj', function ( obj ) {
                    let object = obj;
                    
                    object.scale.set(3,3,3);
                    object.children[0].material.color.set(0xe8b73b);
                    object.rotation.x = 1;
                    object.rotation.y = 0.3;
                    scene.add(object);
                });
    
                var light = new THREE.DirectionalLight(0xffffff);//光源颜色
                light.position.set(20, 10, 1305);//光源位置
                scene.add(light);//光源添加到场景中
    
      </script>
    </body>
    </html>

根据相关资料，包含代码中的3个js文件；然后定义一个加载器来加载模型；

但是不成功；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

没找到加载器类；初步看一下加载器类应该是包含在 OBJLoader.js 中；

three.js加载不同格式3D模型是使用不同加载器；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

[https_blog.csdn.net_bcbobo21cn_article_details_110676331]: https://blog.csdn.net/bcbobo21cn/article/details/110676331
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221024/c5f73c47497c4c70a2a809564b68a6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221024/c1b4024fce17488d8b29c464428c52d3.png