Three.js - 导入的 obj 材料未显示答案

【问题标题】：Three.js - Imported obj material not showingThree.js - 导入的 obj 材料未显示
【发布时间】：2015-12-10 11:38:39
【问题描述】：

我想我的第一个问题是 - 因为我在这里找到的关于这个主题的大多数线程现在都有 3-5 年的历史了 - 导入 3dsmax 模型或场景以在 three.js 中使用的最佳方法是什么？

目前我已经制作了一个应用了简单纹理的快速可乐罐，但是当我使用在示例/js/loaders 下找到的 obj 加载器时，纹理不会加载。

我尝试使用 python 脚本将 obj 文件转换为 js，但是鉴于有一个 obj 加载器，这似乎是一个不必要的额外步骤（我也无法让纹理以这种方式工作）。我是否正确假设 obj 加载器已经过时了 python 转换脚本？

当我尝试加载场景时，我的控制台中出现以下错误：

Not allowed to load local resource: file:///C:/wamp/www/gordon/skins/coke_uv_map.jpg

见以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    </body>
        <script src="three.min.js"></script>
        <script src="controls/OrbitControls.js"></script>
        <script src="DDSLoader.js"></script>
        <script src="MTLLoader.js"></script>
        <script src="OBJMTLLoader.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

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

            var controls;
            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'mousedown', render );

            var hemiLight = new THREE.HemisphereLight( 0xa4cecb, 0xdae0e6, 1 ); 
            scene.add(hemiLight);  

            var dirLight = new THREE.DirectionalLight( 0xFFA200, 1);
            scene.add(dirLight);

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var loader = new THREE.OBJMTLLoader();
            loader.load( 'cokecan.obj', 'cokecan.mtl', function ( object ) {
                object.position.y = 0;
                object.position.x = 0;
                object.position.z = 0;
                scene.add( object );
            });

            camera.position.z = 50;
            camera.position.y = 25;
            camera.position.x = 0;

            function render() {
                requestAnimationFrame( render );
                renderer.render( scene, camera );
            }
            render();
        </script>
</html>

这是我想要的和我得到的（忽略照明）的比较：

【问题讨论】：

根据您的错误，您似乎正在尝试在磁盘驱动器上加载纹理，浏览器通常不允许这样做。我会启动一个简单的 node.js 或兼容的服务器并以这种方式提供资产。出于安全原因，浏览器不允许访问松散文件。
奇怪的是，当我把它放在我的网络服务器上时，我得到了同样的错误。指向本地文件的完全相同的错误。至于node.js，我其实没有经验，也不知道从哪里入手
你能浏览一下材料和obj文件，看看它们是否使用了本地文件路径？您可能只需要编辑它们，理论上它们都应该是相对的，并且您将它们指向正确的远程路径。

标签： javascript three.js

【解决方案1】：

对于遇到相同错误的任何人 - 我通过在文本编辑器中打开 .obj 随附的 .mtl 文件并更改图像的路径来解决此问题。

【讨论】：