Question

这是我的代码，用于将红色网格（十六进制：0xff0000）渲染到场景中。但我的每一次尝试都失败了。我只看到只有一个黑色网格。如果我将颜色改为蓝色或绿色，它可以正常工作。

<script>
 this.initScene = function() {
    this.renderer.setSize(innerWidth, innerHeight);
    this.renderer.setClearColor(0xd9dadd);
    document.getElementById('webgl-container').
    appendChild(this.renderer.domElement);
    document.addEventListener('mousedown', this.onDocumentMouseDown, false);
    document.addEventListener('mousemove', this.onmousemove, false);
    document.addEventListener('mouseup', this.onDocumentMouseUp, false);
    this.light = new THREE.AmbientLight(0xffffff);
    this.camera = new THREE.PerspectiveCamera(75,
            (innerWidth) / innerHeight,
            1,
            1000
            );
    this.camera.lookAt(this.scene.position);
    this.camera.position.z = 8;
    this.scene.add(this.camera);
    this.scene.add(this.light);
    this.plane = new THREE.Mesh(
   new THREE.PlaneBufferGeometry(1000, 1000, 8,8), 
   new THREE.MeshBasicMaterial({color: 0xffffff, visible: false}));
    this.plane.name = 'plane';
    this.scene.add(this.plane);
    this.render();
   }

this.newActor = function() {
    this.dynamicTexture = new THREEx.DynamicTexture(512, 512);
    this.dynamicTexture.context.font = "bolder 110px Verdana";
//this.dynamicTexture.texture.anisotropy = this.renderer.getMaxAnisotropy();
    this.dynamicTexture.clear('cyan');
    this.dynamicTexture.drawText('this.id', undefined, 256, 'black');
    var box = new THREE.Mesh(
            new THREE.BoxGeometry(0.8, 0.8, 0),
            new THREE.MeshBasicMaterial({
                           color: 0xff0000,
                            map :this.dynamicTexture.texture})
            );
}
</script>

Answer 1

在three.js中，material.map被material.color着色。

在您的情况下，地图的颜色为青色（0x00ffff），并且您已将材质颜色设置为红色（0xff0000）。

青色仅在绿色和蓝色通道中具有颜色强度，但红色在这些通道中没有任何颜色强度。因此，最终的颜色是黑色。

在大多数情况下，在为地图指定地图时，您需要将材质颜色保留为白色，默认设置。

three.js r.80

three.js meshBasicMaterial颜色无法识别

1 个答案: