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

}

因此，要解决您的问题，请创建某种材质，并将其作为第二个参数发送到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

您可以在此处找到如何更改装载机的颜色或纹理

TextFX