将带有纹理的简单模型从 Blender 导出到three.js [英] Exporting a simple model with texture from Blender to three.js

问题描述

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

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

我正在尝试将 Blender 模型导出到 也不起作用并导致了同样的错误.

更新 2: 导出到 OBJ+MTL 并使用 OBJMTLLoader.

解决方案

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

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

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

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

Note: I want to avoid modifying the model in the javascript code and do all the model design inside Blender.

Note #2: While this question is long, it is actually a basic problem (title says it all). The below is "walk-through" to the problem.

I am trying export Blender models to threejs.org as DAE model but have problem with models with texture (I have tried JSON and OBJ+MTL format too):

To make things simpler, here are the steps I perform (and fail) to add texture to simple "Startup file" which contains a cube, camera, and light:

1. Select the cube
2. In the Materials panel, make sure the default Material for the cube is selected.
3. In the Texture panel, make sure "Tex" (the default texture for the material) is selected.
4. For this texture, set Type to "Image or Movie"
5. In the Image section of panel, open a grass1.jpg (a 512x512 image) as the texture.
6. In the Mapping section, change the Coordinates to UV.
7. Export the model as Collada model, checking "Include UV Textures", "Include Material Textures", and "Copy" checkboxes.

You can download blend, dae, and texture file mentioned in these steps.

Then I use the following code to load the DAE model, but I get this error and the cube is not shown:

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>

And here is the screenshot of Blender after mentioned 7 steps:

Update: Exporting as js file using JSON exporter for Blender doesn't work either and resulted the very same error.

Update 2: Same error after exporting to OBJ+MTL and loading them with OBJMTLLoader.

解决方案

The problem is you have not set up UV coordinates for your model. By default, each face applies the whole texture, but in blender the UVs are blank when exporting.

You want to specifically set up your UV coordinates. These are coordinates that show how to apply a texture to each face.

Make sure to UV unwrap your model in blender. Go to edit mode (tab), select all faces, press "u", and click "unwrap". Then try to re-export.

Unwrap is just 1 method, there are many. Experiment with different methods in blender to get the results you want (possibly the "reset" option).

这篇关于将带有纹理的简单模型从 Blender 导出到three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！