Question

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

    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;

纹理在应该是图像的地方变黑。如何正确渲染画布？

Answer 1

您应该这样做来创建材料：

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

它与您的相同，但其他用户更清楚材料使用纹理。

其次，要谨慎使用Phong材质，如果你没有在场景中设置任何光线，那么渲染器显示黑色纹理就会产生基本问题，因为前面没有光线。

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

1 个答案: