three.js meshBasicMaterial颜色无法识别

Question

这是我的代码，用于将红色网格（hex：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