Question

我的问题很基本：我有一个纹理对象，我想克隆它，但是Texture.clone似乎不能按预期工作

我的代码和我的问题一样基本：

var canvas = document.createElement("canvas");
canvas.width = canvas.height = 512;
canvas.getContext("2d").fillStyle = "#ff0000";
canvas.getContext("2d").fillRect(0,0,512,512);

var texture = new THREE.Texture(canvas); 
texture.needsUpdate= true;

var material = new THREE.MeshBasicMaterial({map:texture}); 
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(100,100), material); 
scene.add(mesh)

//please, don't focus on "scene" and the webglrenderer object,
//it's define on the top of my code but it's not important here.

此代码按预期工作。

但是，如果我将包含材料定义的行更改为

var material = new THREE.MeshBasicMaterial({map:texture.clone() });

什么都没有出现在屏幕上！为什么？！

编辑：感谢“ TheJim01”，我意识到我没有在克隆的纹理上应用“ needsUpdate = true”。

使用

var cloneTexture = texture.clone();
cloneTexture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial({map:cloneTexture });

一切正常。谢谢

Answer 1

我没有深入研究渲染器代码，因此我不知道它如何使用此信息，但是Texture.needsUpdate会增加纹理的“版本”。 CanvasTexture立即进行了设置，导致第一个渲染的版本值为1。

Texture.clone不会保留版本信息，而是重新调用其构造函数。因为您没有在克隆后设置needsUpdate，所以您没有遵循相同的步骤。

// from your code:
var texture = new THREE.Texture(canvas); 
texture.needsUpdate= true;
// texture.version === 1

// but...

var material = new THREE.MeshBasicMaterial({ map:texture.clone() });
//material.map.version === 0

因此，您要传递到新材料中的克隆的version为0，如果您使用canvas作为源，显然不好。

这应该可以解决问题：

var material = new THREE.MeshBasicMaterial({ map:texture.clone() });
material.map.needsUpdate = true;

如何在Three.js中使用Texture.clone？

1 个答案: