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

Question

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

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

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

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

1. 选择立方体
2. 在 Material 面板中，确保选择立方体的默认 Material 。
3. 在纹理面板中，确保选择“Tex”( Material 的默认纹理)。
4. 对于此纹理，将类型设置为“图像或电影”
5. 在面板的图像部分中，打开grass1.jpg(512x512 图像)作为纹理。
6. 在贴图部分中，将坐标更改为 UV。
7. 将模型导出为 Collada 模型，选中“包括 UV 纹理”、“包括 Material 纹理”和“复制”复选框。

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

然后我使用以下代码加载 DAE 模型，但出现此错误并且未显示立方体:

256 [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 WebGL: too many errors, no more errors will be reported to the console for this context.

<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>

这是上述 7 个步骤后 Blender 的屏幕截图:

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

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

Answer 1

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

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

确保在 blender 中用 UV 解开模型。进入编辑模式(选项卡)，选择所有面，按“u”，然后单击“展开”。然后尝试重新导出。

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