ThreeJS Textur Probleme

Question

Ich habe eine grundlegende Szene in threejs, die eine .stl-Datei lädt, lädt es normal, aber es ändert automatisch die Farbe und ich möchte auch, dass es seine ursprüngliche Farbe hat Was muss ich tun, um es zu beheben?

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

Wie sollte sein:

Wie Sie tun:

Answer 1

Sie nicht sind, ein Material zu Ihrem Mesh-Anwendung.
var mesh = new THREE.Mesh(geometry);

Wenn ein Netz erstellt wird, wenn Sie nicht ein Material angeben, wird eine zufällige farbige BasicMaterial angewandt wird, die gesehen werden kann, wenn man sich die THREE.Mesh source aussehen.

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

} 

Also, Ihr Problem zu beheben, eine Art von Material erstellen, und es zu dem Mesh-Konstruktor als zweiten Parameter senden.
z.

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

finden Sie hier, wie für Ihren Lader Sie ein Bild von Can

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