我正在尝试重新创建一个像一个房间的虚拟之旅给它的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。
对于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>
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