将纹理从Blender导出到three.js的简单模型

Question

注意:我想避免在javascript代码中修改模型,并在Blender中进行所有模型设计.

注意#2:虽然这个问题很长,但它实际上是一个基本问题(标题说明了一切).以下是问题的"演练".

我正在尝试将Blender模型导出为threejs.org作为DAE模型,但是对于具有纹理的模型有问题(我也尝试过JSON和OBJ + MTL格式):

为了简化操作,下面是我执行(并且失败)将纹理添加到包含立方体,相机和灯光的简单"启动文件"的步骤:

1. 选择多维数据集
2. 在" 材质"面板中,确保选中多维数据集的默认材质.
3. 在" 纹理"面板中,确保选中"Tex"(材质的默认纹理).
4. 对于此纹理,将" 类型 " 设置为"图像或电影"
5. 在面板的" 图像"部分中,打开grass1.jpg(512x512图像)作为纹理.
6. 在" 映射"部分中,将" 坐标"更改为"UV".
7. 将模型导出为Collada模型,选中"包含UV纹理","包含材质纹理"和"复制"复选框.

您可以下载这些步骤中提到的混合,dae和纹理文件.

然后我使用以下代码加载DAE模型,但是我收到此错误并且未显示多维数据集:

256 [.WebGLRenderingContext] GL错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性2 WebGL中超出范围的顶点:错误太多,不会再向控制台报告此上下文的错误.

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js"></script>
<script>
    var scene, camera, renderer;
    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
        camera.position.set(10,10,10);
        scene.add(camera);

        window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
        });  

        var loader = new THREE.ColladaLoader();

        loader.load( 'models/untitled.dae', function(geometry) {
            dae = geometry.scene;
            scene.add(dae);
            var gridXZ = new THREE.GridHelper(100, 10);
            gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
            gridXZ.position.set(0,0,0);
            scene.add(gridXZ);
        });

        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

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

这里是Blender提到的7个步骤的截图:

更新:使用Blender的JSON导出器导出为js文件也不起作用,并导致完全相同的错误.

更新2:导出到OBJ + MTL并使用OBJMTLLoader加载它们时出现相同的错误.

Answer 1

问题是您没有为模型设置UV坐标.默认情况下,每个面都应用整个纹理,但在混合器中,UV在导出时为空.

您想要专门设置UV坐标.这些坐标显示如何将纹理应用于每个面.

确保UV在搅拌机中打开您的模型.转到编辑模式(选项卡),选择所有面,按"u",然后单击"展开".然后尝试重新导出.

展开只是一种方法,有很多种方法.在搅拌机中尝试不同的方法以获得您想要的结果(可能是"重置"选项).