如何将具有固有纹理的对象从 Blender 导入到 ThreeJS？

Question

我已经使用 STL Loader for threejs 将我的对象从 Blender 导入到 Threejs，但由于某种原因，纹理没有出现。我认为它与对象的 MeshBasicMaterial 有关。我尝试将其更改为 Phong，但对象变为黑色。

然后我意识到，当我将对象从 STL 加载器加载到 threejs 时，为什么不能保留 Blender 的固有特征/纹理，而不是将材质从基本更改为 phong？有没有办法保持纹理？有我可以遵循的教程吗？

谢谢！

编辑：

这是我的代码的 sn-p，其中我将带有​​纹理的 Blender 对象导出到 threejs .js 文件。该对象加载到我的查看器中，但它是黑色的，没有纹理。我不知道如何解决这个问题。我遵循另一个使用旅馆作为纹理的示例（因此得名。尚未更改名称）。

var Viewport = function ( signals ) {

var container = new UI.Panel( 'absolute' );
container.setBackgroundColor( '#aaa' );

var clock = new THREE.Clock();

// settings
var enableHelpersFog = true;

// helpers

var objects = [];
var INTERSECTED;

var sceneHelpers = new THREE.Scene();

//the grid that appears at the beginning. 
var size = 500, step = 25;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );

for ( var i = - size; i <= size; i += step ) {

    geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
    geometry.vertices.push( new THREE.Vector3(  size, 0, i ) );

    geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
    geometry.vertices.push( new THREE.Vector3( i, 0,  size ) );

    var color = i === 0 ? color1 : color2;

    geometry.colors.push( color, color, color, color );
}
var grid = new THREE.Line( geometry, material, THREE.LinePieces );
sceneHelpers.add( grid );


///Objects stuff
var objectshapes = [];

//stl files
group = new THREE.Object3D();




            var loader_slotted_disk = new THREE.STLLoader();
            loader_slotted_disk.addEventListener( 'load', function ( event ) {
                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh1 = new THREE.Mesh( geometry, material );

                mesh1.name='slotted disk';
                mesh1.castShadow = true;
                mesh1.receiveShadow = true;

                sceneHelpers.add( mesh1 );
                objectshapes.push( mesh1 );

            } );    
            loader_slotted_disk.load( 'js/ui/assests/slotted_disk.stl' );

            var loader_left_bronchus = new THREE.STLLoader();
            loader_left_bronchus.addEventListener( 'load', function ( event ) {

                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh1 = new THREE.Mesh( geometry, material );

                mesh1.name='left bronchus';
                mesh1.castShadow = true;
                mesh1.receiveShadow = true;

                mesh1.position.x = Math.random() * 200 - 50;
                mesh1.position.y = Math.random() * 200 - 50;
                mesh1.position.z = Math.random() * 200 - 50;

                sceneHelpers.add( mesh1 );
                objectshapes.push( mesh1 );

            } );
            loader_left_bronchus.load( 'js/ui/assests/left_bronchus.stl' );

            var loader_parenchyma = new THREE.STLLoader();
            loader_parenchyma.addEventListener( 'load', function ( event ) {

                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh2 = new THREE.Mesh( geometry, material );

                mesh2.name='parenchyma';
                mesh2.castShadow = true;
                mesh2.receiveShadow = true;

                sceneHelpers.add( mesh2 );
                objectshapes.push( mesh2 );

            } );
            //loader_parenchyma.load( 'js/ui/assests/parenchyma.stl' );

            //group.rotation.x = Math.PI* 3/2


            ////////////
// CUSTOM //
////////////



                        var inn_loader = new THREE.JSONLoader(); inn_loader.load("js/reducedandcoloredmodel[Conflict].js", function(geo, material) { var materials = new THREE.MeshFaceMaterial(material); inn = new THREE.Mesh(geo, materials); scene.add(inn); }); // 
///stl files added

            var geometry = new THREE.CubeGeometry( 50, 50, 50 );
            var geometry2 = new THREE.SphereGeometry( 50, 10, 10);

            var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
            object.name = "cube";

            object.position.x = Math.random() * 200 - 50;
            object.position.y = Math.random() * 200 - 50;
            object.position.z = Math.random() * 200 - 50;


            object.rotation.x = Math.random() * 2 * Math.PI;
            object.rotation.y = Math.random() * 2 * Math.PI;
            object.rotation.z = Math.random() * 2 * Math.PI;

            sceneHelpers.add( object );
            objectshapes.push( object );

            var object2 = new THREE.Mesh( geometry2, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
            object2.name = "sphere";

            object2.position.x = Math.random() * 200 - 50;
            object2.position.y = Math.random() * 200 - 50;
            object2.position.z = Math.random() * 200 - 50;

            object2.rotation.x = Math.random() * 2 * Math.PI;
            object2.rotation.y = Math.random() * 2 * Math.PI;
            object2.rotation.z = Math.random() * 2 * Math.PI;

            sceneHelpers.add( object2 );
            objectshapes.push( object2 );
            console.log(objectshapes);


///box around object
var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, fog: false } ) );
selectionBox.matrixAutoUpdate = false;
selectionBox.visible = false;
sceneHelpers.add( selectionBox );

///axis
var selectionAxis = new THREE.AxisHelper( 100 );
selectionAxis.material.depthTest = false;
selectionAxis.material.transparent = true;
selectionAxis.matrixAutoUpdate = false;
selectionAxis.visible = false;
sceneHelpers.add( selectionAxis );

// default dummy scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );;

// fog

var oldFogType = "None";
var oldFogColor = 0xaaaaaa;
var oldFogNear = 1;
var oldFogFar = 5000;
var oldFogDensity = 0.00025;

// object picking

var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000, 8, 8 ) );
intersectionPlane.visible = false;
sceneHelpers.add( intersectionPlane );

var ray = new THREE.Raycaster();
var projector = new THREE.Projector();
var offset = new THREE.Vector3();

var cameraChanged = false;
var helpersVisible = true;

//by default the selected scene object is the camera.
var picked = null;
var selected = camera;

Answer 1

doob 先生已经指出 stl 没有指定颜色或纹理，它是纯几何。我建议使用 three.js 导出器从搅拌器中导出一些琐碎的东西（例如带有纹理的立方体），以了解正在发生的事情。我在threejs-and-blender 有示例代码。查看那些threejs演示的源代码，看看拉入了哪些文件，你也应该找到对图像的引用。

一旦你完成了这项工作，找出更复杂的模型就会变得更容易。另外，如果您不想共享原始模型，则共享一个简单的立方体进行调试应该没有问题。

Answer 2

虽然我没有使用 JSON 加载器，但我尝试使用 Collada 加载器（因为我的模型在 Webgl 加载器 collada 示例中导入时会离线保留纹理）并且在当前的 3-D 查看器中，我的模型仍然是黑色的.但是，添加灯光后，纹理会显示出来。

基本上，我假设与 JSON 加载器一样，我需要在我的 3-D 查看器中添加一个灯光以显示模型的外部。

Answer 3

我在使用 Blender v 2.68a 时遇到了同样的问题。 Blender 2.71 解决了这个问题。

我使用 Blender 2.71 导入了之前在 WebGl 上显示为黑色的 .stl 文件，然后在不更改默认 .stl 导出器菜单中的任何设置参数的情况下将其导出。 我用 WebGl 重新加载了文件，它就在那里，全彩！