ThreeJS纹理问题

Question

I have a basic scene in threejs that loads a .stl file, it loads normally, but it automatically changes color and I also want it to have its original color What do I have to do to fix it?

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();

How should be:

How are you doing:

Answer 1

You are not applying a material to your Mesh.
var mesh = new THREE.Mesh(geometry);

When a mesh is created, if you do not specify a material, a random colored BasicMaterial is applied which can be seen if you look at the THREE.Mesh source .

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();

}

So, to fix your problem, create some sort of material, and send it to the Mesh constructor as the second parameter.
eg.

// 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

you can find here how to change color or texture for your loader

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);
                    });