0

threejs 用の STL ローダーを使用してオブジェクトを Blender から threejs にインポートしましたが、何らかの理由でテクスチャが表示されません。オブジェクトの MeshBasicMaterial と関係があると思います。Phong に変更しようとしましたが、代わりにオブジェクトが黒くなります。

次に、マテリアルをベーシックからフォンに変更する代わりに、オブジェクトを STL ローダーから threejs にロードするときに Blender の固有の機能/テクスチャを保持できないのはなぜですか? 質感を保つ方法はありますか？私が従うことができるチュートリアルはありますか？

ありがとう！

編集：

これは、テクスチャを含む 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;
4

3 に答える 3

1

mr doob は、stl が色やテクスチャを指定していないことを既に指摘しています。これは純粋なジオメトリです。何が起こっているのかを理解するために、three.js エクスポーターを使用して、ブレンダーから些細なもの (テクスチャーのある立方体など) をエクスポートすることをお勧めします。threejs-and-blender にサンプルコードがあります。これらの threejs デモのソースを表示し、どのファイルが取り込まれているかを調べます。画像への参照も見つかるはずです。

それが機能すると、より複雑なモデルを理解するのが簡単になります。さらに、元のモデルを共有したくない場合は、デバッグ用の単純なキューブを共有しても問題ありません。

于 2013-04-15T14:06:45.940 に答える