[英]Three.js problems with rendering texture from canvas
I'm trying to make a texture form a canvas. 我正在尝试从画布上制作纹理。 I was able to make a blank canvas render properly, but when i try to draw an image on the canvas and then render it, it fails to render properly. 我能够使空白画布正确渲染,但是当我尝试在画布上绘制图像然后进行渲染时,它无法正确渲染。 My code looks like this: 我的代码如下所示:
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);
When I first initialize the canvas, the texture renders properly, however, when I draw an image on the canvas like this: 当我第一次初始化画布时,纹理会正确渲染,但是,当我在画布上绘制图像时,如下所示:
canvas.drawImage(image, 0, 0, 50, 50);
plane.material.map.needsUpdate = true;
The texture becomes black where the image is supposed to be. 纹理将在应该图像的位置变黑。 How can I make the canvas render properly? 如何使画布正确渲染?
You should do this to create your material : 您应该这样做来创建材料:
var mat = new THREE.MeshPhongMaterial({map: texture});
It's the same as you did but it's more clear to other user that the material use a texture. 和您做的一样,但其他用户更清楚该材质使用纹理。
Secondly, be cautious with the Phong Material, if you didn't set any light in the scene you could have just basic issue with the renderer showing a black texture because there is no light in front of it. 其次,请谨慎使用“ Phong材质”,如果您未在场景中设置任何灯光,则渲染器显示黑色纹理可能是一个基本问题,因为前面没有灯光。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.