javascript - Three.js - 导入的 obj Material 未显示

标签 javascript three.js

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

目前,我已经制作了一个应用了简单纹理的快速可乐 jar ,但是当我使用 Examples/js/loaders 下的 obj 加载器时,纹理不会加载。

我尝试过使用python脚本将obj文件转换为js,但是考虑到有一个obj加载器,这似乎是一个不必要的额外步骤(我也无法让纹理以这种方式工作)。我是否正确假设 obj 加载器已使 python 转换脚本过时?

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

不允许加载本地资源: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>

以下是我想要的与我得到的的比较(忽略灯光):

Renders

最佳答案

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

关于javascript - Three.js - 导入的 obj Material 未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34187856/

相关文章:

javascript - 如何区分字母的大小写?

javascript - 如何使用 Yesod 构建 AngularJS 应用程序

javascript - angularjs ng-repeat在选择选项中过滤多个字段

javascript - Three.js 为 faceColors 和 vertexColors 重用几何体

javascript - AFrame:如何将THREE.LineBasicMaterial放入Aframe中

javascript - Three.js .png 图像呈现白色,而不是应有的样子

javascript - 实现 "scroll to top"按钮

javascript - 如何正确使用选铁器?像铁页一样使用时,项目似乎为空

javascript - 移动正交相机以沿着一条线移动

javascript - 如何在 Three.js 模型上绘图?