0
343
ViewsCambiando la forma en que three.js proyecta una textura en una media esfera
Actualmente estoy tratando de proyectar una imagen en el interior de una media esfera en un proyecto three.js. La media esfera se crea a través de
const geometry = new THREE.SphereGeometry(Component.radius, this.resolution, this.resolution, Math.PI, Math.PI, 0, Math.PI); this.material = new THREE.MeshStandardMaterial({color: 0xffffff}); this.material.side = THREE.DoubleSide; this.sphere = new THREE.Mesh(geometry, this.material); // The image of the texture is set later dynamically via // this.material.map = textureLoader.load(...);Siendo constantes el radio y la resolución. Esto funciona bien, excepto por un problema: la imagen se distorsiona alrededor de la "parte superior" y la "parte inferior" de la esfera, así: Ejemplo simple de textura distorsionada:
La textura originalmente tenía el valor "0,0" en la parte inferior izquierda y "0,1" en la parte inferior derecha, y con la cámara mirando hacia abajo desde el centro de la semiesfera, las esquinas inferior izquierda e inferior derecha están aplastadas sobre el " punto inferior" de la esfera.
Quiero cambiar este comportamiento para que las esquinas de la textura estén donde estarían si colocas la textura cuadrada en una esfera, con las esquinas tocando el círculo, luego estirando las líneas entre las esquinas para que coincidan con el círculo. Simple burla de lo que quiero decir:
He intentado jugar con el Atributo de mapeo de mi textura, pero eso no cambia el comportamiento de mi entendimiento.
1 answers
Answer question0
Después de cambiar las coordenadas UV, mi textura de media esfera tampoco se estira en el borde:
this.sphereGeometry = new THREE.SphereGeometry( 10, 32, 24, 0, Math.PI, 0, Math.PI ); const { uv: uvAttribute, normal } = this.sphereGeometry.attributes; for (let i = 0; i < normal.count; i += 1) { let u = normal.getX(i); let v = normal.getY(i); u = u / 2 + 0.5; v = v / 2 + 0.5; uvAttribute.setXY(i, u, v); } const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/CslEXIS.jpg' ); texture.flipY = false; texture.mapping = THREE.CubeUVRefractionMapping; texture.needsUpdate = true; const basicMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, }); this.sphere = new THREE.Mesh(this.sphereGeometry, basicMaterial); this.scene.add(this.sphere);