我如何将纹理数组传递到反应三纤维网格?

Question

我正在尝试重新创建一个像一个房间的虚拟之旅给它的6面，(前，后，上，下，左和右)。

在其他代码中…

let loader = new THREE.TextureLoader();
// array for holding all texutre
let textureArray = [];
// all texture
let frontTexture = loader.load(front_texture);
let backTexture = loader.load(back_texture);
let topTexture = loader.load(top_texture);
let bottomTexture = loader.load(bottom_texture);
let leftTexture = loader.load(left_texture);
let rightTexture = loader.load(right_texture);
textureArray.push(new THREE.MeshBasicMaterial({ map: frontTexture }));
textureArray.push(new THREE.MeshBasicMaterial({ map: backTexture }));
textureArray.push(new THREE.MeshBasicMaterial({ map: topTexture }));
textureArray.push(new THREE.MeshBasicMaterial({ map: bottomTexture }));
textureArray.push(new THREE.MeshBasicMaterial({ map: leftTexture }));
textureArray.push(new THREE.MeshBasicMaterial({ map: rightTexture }));
for (let i = 0; i < textureArray.length; i++) {
textureArray[i].side = THREE.BackSide;
}
// making cube
let cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
//Assign cube geometry and texture to the mesh
let mesh = new THREE.Mesh(cubeGeometry, textureArray);
//Return the mesh
return mesh;

在新代码中…

let loader = new TextureLoader();
// array for holding all texutre
let textureArray = [];
// all texture
const frontTexture = useLoader(TextureLoader, front_texture);
const backTexture = useLoader(TextureLoader, back_texture);
const topTexture = useLoader(TextureLoader, top_texture);
const bottomTexture = useLoader(TextureLoader, bottom_texture);
const leftTexture = useLoader(TextureLoader, left_texture);
const rightTexture = useLoader(TextureLoader, right_texture);
textureArray.push(new MeshBasicMaterial({ map: frontTexture }));
textureArray.push(new MeshBasicMaterial({ map: backTexture }));
textureArray.push(new MeshBasicMaterial({ map: topTexture }));
textureArray.push(new MeshBasicMaterial({ map: bottomTexture }));
textureArray.push(new MeshBasicMaterial({ map: leftTexture }));
textureArray.push(new MeshBasicMaterial({ map: rightTexture }));
for (let i = 0; i < textureArray.length; i++) {
textureArray[i].side = BackSide;
}
return (
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshBasicMaterial map={frontTexture}  />
</mesh>
);

我想获得与上面代码相同的结果，但是使用react-three-fiber或react-three-drei。

Answer 1

对于R3F，根据这里的讨论，现在您应该这样做:

<mesh>
<boxGeometry args={[10, 10, 10]} />
<meshBasicMaterial attach="material-0" color="0xffffff" /> {/* px */}
<meshBasicMaterial attach="material-1" color="0xffffff" /> {/* nx */}
<meshBasicMaterial attach="material-2" color="0xffffff" /> {/* py */}
<meshBasicMaterial attach="material-3" color="0xffffff" /> {/* ny */}
<meshBasicMaterial attach="material-4" color="0xffffff" /> {/* pz */}
<meshBasicMaterial attach="material-5" map={texture} transparent /> {/* nz */}
</mesh>

Answer 2

let loader = new TextureLoader(); 
// all texture 
const texture =useLoader(TextureLoader, '/images/front_texture'); 
const texture1 =useLoader(TextureLoader, '/images/back_texture'); 

return (
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshBasicMaterial attach="material-0" color="0xffffff" />
<meshBasicMaterial attach="material-1" color="0xffffff" />
<meshBasicMaterial attach="material-2" color="0xffffff" />
<meshBasicMaterial attach="material-3" color="0xffffff" />
<meshBasicMaterial
attach="material-4"
map={texture1}
color="0xffffff"
/>
<meshBasicMaterial attach="material-5" map={texture} />
</mesh>
);

不需要使用array