How to use equirectangular with a cube?

[vantu98]

Ref: https://github.com/mrdoob/three.js/blob/master/examples/webgl_panorama_equirectangular.html

Hello guys!

Im doing a demo base on this examples on ThreeJs with Box Geometry. Is there a way to use Equirectangular texture in a BoxGeometry?

Thanks you.

[drcmda]

you'd do it the exact same way.

[peachope]

{(textureEquirec) => ( )}

[drcmda]

i don't quite follow, where does {( textureEquirec )} => come from?

this is the code you want to use

scene = new THREE.Scene();
const geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
const texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

so, that would be

const texture useLoader(THREE.TextureLoader, url)
return (
  <mesh scale={[-1, 1, 1]}>
    <sphereGeometry args={[500, 60, 40]} />
    <meshBasicMaterial map={texture} />
  </mesh>

[vantu98]

thanks so much, but I think we have some misunderstanding here.
I mean, ThreeJs example is using EQ image (equirectangular) to render with SphereGeometry.
My goal is using them same EQ image to render with BoxGeometry. (Currently I'm using 6 images as an array props to render)

[drcmda]

i think for plain threejs questions you'll have more luck in threes discourse or discord. i can only show you how to express something in jsx.

[jonathanschad]

so, that would be

const texture useLoader(THREE.TextureLoader, url)
return (
  <mesh scale={[-1, 1, 1]}>
    <sphereGeometry args={[500, 60, 40]} />
    <meshBasicMaterial map={texture} />
  </mesh>

In my case, in order to make the example work, I also needed to add side={BackSide}to the meshBasicMaterial.

<mesh scale={[-1, 1, 1]}>
    <sphereBufferGeometry args={[500, 60, 40]} />
    <meshBasicMaterial map={colorMap} side={BackSide} />
</mesh>