在 THREE.js 中对球体进行纹理处理答案

【问题标题】：Texturing a sphere in THREE.js在 THREE.js 中对球体进行纹理处理
【发布时间】：2013-12-23 14:05:30
【问题描述】：

是否可以逐部分纹理化球体？例如，我们可以在立方体的 6 个面上使用 6 个纹理，这样我们就可以逐个地对立方体进行纹理处理。是否有可能在领域做同样的事情？我不想将一个纹理重叠在另一个上，而是在球体的不同部分使用不同的纹理。例如，纹理 1 的球体的前 1/4，纹理 2 的球体的第二个 1/4 ......以此类推。我们可以使用 THREE.js 或任何其他库来实现这一点吗？

提前致谢。

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

SphereGeometry 构造函数具有可让您构造球体扇区的参数：

THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

实现您想要的最简单的方法是使用以下模式：

var parent = new THREE.Object3D();
scene.add( parent );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 0 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture0 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 1 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture1 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 2 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture2 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 3 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture3 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

three.js r.63

【讨论】：

非常感谢。它工作得很好。有一个问题，假设我有 32 个图块/图像要填充，我需要 32 个球体，当我这样做时，我的浏览器经常崩溃，在 IE 中它甚至不显示单个图块。我的主要目的是通过部分引入图像而不是一次加载整个图像来更快地加载我的页面。请给我一些建议。
问题是关于 4 个图块，而不是 32 个图块。考虑other approaches，如果遇到问题，请发布一个新的详细问题。
嘿，我需要一个帮助，请您向我推荐一些文章，以了解在开发高性能 webgl 应用程序时应牢记的因素或约束。我需要了解影响 webgl 性能的因素。
这是一个非常笼统的 webgl 问题。如果您有更多问题，您将不得不发一个新帖子并将其标记为 webgl。
我已经就这个问题发表了一篇新文章。请点击此链接stackoverflow.com/questions/20606350/…