3 .js meshBasicMaterial颜色无法识别

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