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

Question

注意：我想避免在 javascript 代码中修改模型，并在 Blender 中完成所有模型设计。

注意#2：虽然这个问题很长，但它实际上是一个基本问题（标题说明了一切）。以下是问题的“演练”。

我正在尝试将 Blender 模型作为 DAE 模型导出到 threejs.org，但纹理模型有问题（我也尝试过 JSON 和 OBJ+MTL 格式）：

为了让事情变得更简单，以下是我执行（但失败）为包含立方体、相机和灯光的简单“启动文件”添加纹理的步骤：

1. 选择立方体
2. 在材质面板中，确保选中立方体的默认材质。
3. 在纹理面板中，确保选择了“Tex”（材质的默认纹理）。
4. 对于此纹理，将 Type 设置为“图像或电影”
5. 在面板的图像部分，打开一个grass1.jpg（512x512图像）作为纹理。
6. 在 Mapping 部分中，将 Coordinates 更改为 UV。
7. 将模型导出为 Collada 模型，选中“包含 UV 纹理”、“包含材质纹理”和“复制”复选框。

您可以在这些步骤中提到download blend, dae, and texture file。

然后我使用以下代码加载 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个步骤后的截图：

更新：使用 JSON exporter for Blender 导出为 js 文件也不起作用，并导致同样的错误。

更新 2： 导出到 OBJ+MTL 并使用 OBJMTLLoader 加载它们后出现同样的错误。

Answer 1

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

您想专门设置 UV 坐标。这些是显示如何将纹理应用到每个面的坐标。

确保在搅拌机中对模型进行 UV 解包。进入编辑模式（选项卡），选择所有面，按“u”，然后单击“展开”。然后尝试重新导出。

Unwrap 只是一种方法，还有很多。在搅拌机中尝试不同的方法以获得您想要的结果（可能是“重置”选项）。