我如何将我的对象与它的固有纹理从Blender导入到ThreeJS

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

然后我意识到，而不是改变材料从基本到phong，为什么我不能保持固有的特征/纹理从Blender当我加载对象从STL加载到三个ejs?有办法保持口感吗?有我可以遵循的教程吗?

谢谢!

这是我的代码片段，我把我的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;