three.js CanvasRenderer - 设置对象的初始颜色和透明度纹理答案

【问题标题】：three.js CanvasRenderer - setting initial color for object together with transparency texturesthree.js CanvasRenderer - 设置对象的初始颜色和透明度纹理
【发布时间】：2013-12-10 10:28:01
【问题描述】：

我尝试使用 CanvasRenderer 渲染我的对象，这将在运行时更改其纹理。纹理是具有透明背景的 PNG 图像，我希望从对象设置面部的背景基色。

我已阅读this 以使纹理成功加载并映射到对象中，但是当我尝试更改对象的初始颜色时，我发现对象的空白区域将保持透明（并且可以看到通过进入它）并且没有我期望的任何基色。

以下是我用来试用的代码：

var texture = THREE.ImageUtils.loadTexture("./"+texture_url,new
THREE.UVMapping()); 

child.material = new THREE.MeshBasicMaterial( 
                    {    
                          map: texture,  
                          transparent:false, 
                          opacity: 1
                    }); 

var color = new THREE.Color("rgb(245,210,179)");

child.material.color = color;
child.material.needsUpdate = true;

这里有什么问题？

已编辑：尝试了 opacity 属性，但仍然没有运气。但是，如果从代码中删除map: texture，则对象可以显示为预期的背景颜色而没有任何透明度。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您看到的是CanvasRenderer 的限制。

您不能应用透明纹理并期望它渲染为贴花——也就是说，材料颜色会透出来。

您可以拥有颜色或纹理 - 但不能同时拥有。

解决方法是修改纹理。

three.js r.63

【讨论】：

我明白了。但我宁愿知道这是three.js 本身或非webGL html5 画布渲染的限制？这意味着如果使用非 webGL 方法而不是 three.js 的 CanvasRenderer，这个问题将始终存在。
如果您对其他方法有疑问，您将不得不发一个新帖子。我只能评论three.js。
OK NVM。感谢您的回复：）