Three.js 从画布渲染纹理的问题答案

【问题标题】：Three.js problems with rendering texture from canvasThree.js 从画布渲染纹理的问题
【发布时间】：2014-09-26 07:15:28
【问题描述】：

我正在尝试使纹理形成画布。我能够正确渲染空白画布，但是当我尝试在画布上绘制图像然后渲染它时，它无法正确渲染。我的代码如下所示：

    var canvas= document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    var texture = new THREE.Texture(canvas);
    var mat = new THREE.MeshPhongMaterial();
    mat.map = texture;

    var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), mat);
    var plane = mesh;
    scene.add(plane);

当我第一次初始化画布时，纹理会正确渲染，但是，当我在画布上这样绘制图像时：

canvas.drawImage(image, 0, 0, 50, 50);
plane.material.map.needsUpdate = true;

纹理在图像应有的位置变为黑色。如何使画布正确渲染？

【问题讨论】：

标签： javascript canvas three.js textures

【解决方案1】：

你应该这样做来创建你的材料：

var mat = new THREE.MeshPhongMaterial({map: texture});

与您所做的相同，但其他用户更清楚该材质使用纹理。

其次，谨慎使用 Phong 材质，如果您没有在场景中设置任何灯光，您可能会遇到渲染器显示黑色纹理的基本问题，因为它前面没有灯光。

【讨论】：