Question

我想我的第一个问题是 - 因为我在这个主题上找到的大多数线程现在已经有3到5年了 - 导入3dsmax模型或场景的最佳方法是在three.js中使用？

目前我已经应用了一个简单的纹理快速炼焦，但是当我使用在examples / 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>

以下是我想要的与我得到的对比（忽略照明）：

Answer 1

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

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

1 个答案: