I'm trying to create a cube with a different image on each side using CubeTextureLoader
. My process is:
new THREE.CubeTextureLoader()
The relevant code is below. I can draw a cube with a single material for all faces fine using THREE.TextureLoader()
, but when I use CubeTextureLoader
I get nothing onscreen or any console errors.
var textureLoader = new THREE.CubeTextureLoader();
textureLoader.load([
'textures/face-1.jpg',
'textures/face-2.jpg',
'textures/face-3.jpg',
'textures/face-4.jpg',
'textures/face-5.jpg',
'textures/face-6.jpg'
], function (texture) {
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: texture
});
var cube = new THREE.Mesh(
new THREE.BoxGeometry(20, 20, 20),
material
);
// add & draw calls happen after all this
});
I'm guessing I'm using the wrong Material type or Mesh but can't find any info or examples on how to do this correctly. Any ideas?
THREE.MultiMaterial
has also been removed, as described in: https://github.com/mrdoob/three.js/issues/10931
Now, you can use an array of materials in the mesh constructor instead. For example:
let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );
As Micnil mentioned, CubeTextureLoader
is for CubeMap which is used for SkyBox or EnvMap.
Use MeshFaceMaterial
instead.
var textureLoader = new THREE.TextureLoader();
var texture0 = textureLoader.load( './0.jpg' );
var texture1 = textureLoader.load( './1.jpg' );
var texture2 = textureLoader.load( './2.jpg' );
var texture3 = textureLoader.load( './3.jpg' );
var texture4 = textureLoader.load( './4.jpg' );
var texture5 = textureLoader.load( './5.jpg' );
var materials = [
new THREE.MeshBasicMaterial( { map: texture0 } ),
new THREE.MeshBasicMaterial( { map: texture1 } ),
new THREE.MeshBasicMaterial( { map: texture2 } ),
new THREE.MeshBasicMaterial( { map: texture3 } ),
new THREE.MeshBasicMaterial( { map: texture4 } ),
new THREE.MeshBasicMaterial( { map: texture5 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );
var geometry = new THREE.BoxGeometry( 20, 20, 20 );
var boxMesh = new THREE.Mesh( geometry, faceMaterial );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With