ThreeJS紋理問題

Question

我在threejs中有一個基本場景，該場景可以加載.stl文件，可以正常加載，但是會自動更改顏色，我還希望它具有其原始顏色，我該怎么辦才能修復它？

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 500 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.center =  new THREE.Vector3();

// var geometry = new THREE.BoxGeometry( 3, 1, 1 );
// var material = new THREE.MeshBasicMaterial( { color: 'skyblue' } );
// var cube = new THREE.Mesh( geometry, material );
// scene.add( cube );

var loader = new THREE.STLLoader();
loader.load( 'js/novo/undefined.stl', function ( geometry ) {
    console.log(geometry);

    var mesh = new THREE.Mesh(geometry);
    mesh.scale.set( 0.1, 0.1, 0.1 );
    // mesh.rotation.set( - Math.PI / 2, Math.PI / 2, 0 );
    // mesh.scale.set( 0.3, 0.3, 0.3 );
    // mesh.receiveShadow = true;
    scene.add( mesh );
});

camera.position.z = 300;

var animate = function () {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
};

animate();

應該如何：

你好嗎：

Answer 1

您沒有將材料應用於網格。
var mesh = new THREE.Mesh(geometry);

創建網格時，如果不指定材質，則會應用隨機着色的BasicMaterial，如果您查看THREE.Mesh源 ，則可以看到該顏色 。

function Mesh( geometry, material ) {

    Object3D.call( this );

    this.type = 'Mesh';

    this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
    this.material = material !== undefined ? material : new MeshBasicMaterial( { color: Math.random() * 0xffffff } );

    this.drawMode = TrianglesDrawMode;

    this.updateMorphTargets();

}

因此，要解決您的問題，請創建某種材料，並將其作為第二個參數發送到Mesh構造函數。
例如。

// create a red material.
var myMaterial = new THREE.MeshBasicMaterial({color: 0xff0000})
// create mesh with red material applied
var mesh = new THREE.Mesh(geometry, myMaterial);

Answer 2

您可以在這里找到如何更改裝載機的顏色或紋理

var loader = new THREE.STLLoader();
                    loader.load('./FA-FF/FA.STL', function (geometry) {
                        /* different texture */
                        var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/wood.jpg') });
                       /* for different color */
                        var material = new THREE.MeshPhongMaterial({ color: 0xAAAAAA, specular: 0x111111, shininess: 200 });

                        var mesh = new THREE.Mesh(geometry, material);
                        mesh.name = "first";
                        mesh.position.set(-1, 1, 0);
                        mesh.rotation.set(1.5707963267948963, -8.326672684688674, -1.570796326794894);
                        mesh.scale.set(0.005, 0.005, 0.005);
                        mesh.castShadow = true;
                        mesh.receiveShadow = true;
                        scene.add(mesh);
                    });