我是html5和three.js的新手。我已经对其进行了一些实验,基本上我想要做的是拥有一个Mesh(我正在使用planeGeometry,因为我遵循的教程使用了它)。网格显示不同的纹理,以后可以更改。

这是我的代码如下所示:

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png");
angelTexture.offset.x = -0.75;
angelTexture.offset.y = -0.75;

angelMesh = new THREE.Mesh( new THREE.PlaneGeometry(79, 53, 79, 53), new THREE.MeshBasicMaterial( { map: angelTexture, wireframe: false } ));

angelMesh.position.x = 0;
angelMesh.position.y = 0;
scene.add(angelMesh);

问题在于,每当偏移时,网格物体似乎就足以显示所有其他Sprite(我将纹理用作偏移的2D Sprite以对其进行动画处理)。结果是非常灾难性的,我仍在弄清楚如何控制网格的大小,以便仅显示Sprite的一个快照。我所有的尝试似乎都只是在调整网格物体和基础纹理的大小,并且仍然显示所有Sprites。

有人可以指出我正确的方向吗?提前致谢。

...

我的 friend 想出了一个解决方案...
我错过了重复属性。
angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png");
angelTexture.offset.x = -0.75;
angelTexture.offset.y = -0.75;

angelTexture.repeat.x = 0.25;
angelTexture.repeat.y = 0.25;
scene.add(angelMesh);

希望这可以帮助其他有同样问题的人。

最佳答案

不久前我遇到了同样的问题,因此我写了一个完整的示例,使用 Sprite 表作为PlaneGeometry的纹理进行动画处理,然后以固定的间隔更新纹理-在以下位置查看示例

http://stemkoski.github.io/Three.js/Texture-Animation.html

并查看注释后的源代码以获取其他说明。

09-17 20:45
查看更多