在球体上使用多重纹理[Three.js] [英] Using multiuple textures on a sphere [Three.js]

问题描述

是否可以在球体上加载多个纹理？

Is it possible to load multiple textures on a sphere?

我的意思是说在 Three.js 将一个球体拆分成 n 碎片，将它们分开纹理并再次渲染这些碎片作为一个整体球体？

I mean to say is there any way in Three.js to split a sphere into n pieces , texture them separately and render those pieces once again as a whole sphere?

我不想在球体上加载整个纹理，而只是要渲染用户首先在屏幕上看到的那些部分，并且当用户旋转球体时，纹理的其余部分必须是加载。

I do not want to load the entire texture on the sphere, instead, only those parts are to be rendered which the user will first see on the screen and as the user rotates the sphere the rest part of the texture must be loaded.

此外，当我在球体上使用单个图像时，它似乎会聚集在极点上，使其变得更糟。

Moreover, when I use a single image on a sphere it seems to converge at poles making it worse.

推荐答案

这应该有所帮助： https://open.bekk.no/procedural-planet-in-webgl-and-three-js
尝试使用立方体并将其扩展为球体，而不是使用球体。立方体球体上的立方体逻辑将为您节省大量时间。

This should help: https://open.bekk.no/procedural-planet-in-webgl-and-three-js Instead of using a sphere try using a cube and expanding it into a sphere. Cube logic on the cube sphere will save you a good amount of time.

var geometry = new THREE.BoxGeometry( 1, 1, 1, 8, 8, 8 );
for ( var i in geometry.vertices ) {
    var vertex = geometry.vertices[ i ];
    vertex.normalize().multiplyScalar(radius);
}

var materialArray = [];
var faceMaterial = new THREE.MeshLambertMaterial({
    color: sphereColor,
    transparent: true,
    opacity: 0.4
});
for (var i = 0; i < 6; i++) {
    materialArray.push(faceMaterial);
}

var material = new THREE.MeshFaceMaterial(materialArray);
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

这篇关于在球体上使用多重纹理[Three.js]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！