How to Add 6 different images to a single cube g68

Questions
1

Hello:
I have this page: http://songnes.com/g/g68.html
( see text her: http://songnes.com/g/g68.txt)

a few questions.

  1. How I can add, one different image, or picture on each side (total 6)?

2)How can I have more light! It’s too dark…

Thank you!! For all your help. I’m learning a lot!!!

2

If you want a multi-material cube, the simplest way would be to craft a cube with six THREE.Plane.
It increases the number of draw calls so it impacts a bit performance, but if you have only one cube like this it’s hardly noticeable.

About the light, if you want a more luminous scene, try replacing your pointLight with a directionalLight

1 Like
3

Another possible simplest way is to create one box geometry and an array of six materials with different textures in their .map property, and pass the geometry and array into the constructor of THREE.Mesh().

And to make things brighter, try to increase the value of intensity parameter (the second one) of the ambient light.

4

Thans, felix and prisoner: I like this
" Another possible simplest way is to create one box geometry and an array of six materials with different textures in their .map property, and pass the geometry and array into the constructor of THREE.Mesh() ."
but can you please tell me “how” to actually do this…in code

5

Something like this:

var loader = new THREE.TextureLoader();
var mats = [
  pictureURL1, //those are strings with urls, for example: "https://threejs.org/examples/textures"/uv_grid_opengl.jpg
  pictureURL2,
  pictureURL3,
  pictureURL4,
  pictureURL5,
  pictureURL6,
].map(pic => {
  return new THREE.MeshLambertMaterial({map: loader.load(pic)});
});
var geom = new THREE.BoxBufferGeometry(2, 2, 2);
var box = new THREE.Mesh(geom, mats);
1 Like
6

g69
Thank you prisoner849!!!
And to make things brighter, try to increase the value of intensity parameter (the second one) of the ambient light. —> This helps a lot, solve the problem!

before
ambientLight = new THREE.AmbientLight(0xffffff, 0.2); // too dark, no light!

after
ambientLight = new THREE.AmbientLight(0xffffff, 1.2); // more light, nice!!

Thank you, one more thing I learned today, great!

7

g70
Hello: almost, but not still I’m doing something wrong.

// ADD PICTURE:
var cubeNormalMap;
var cubeBumpMap;
var manyImages = new THREE.TextureLoader();
var mats = [
“http://songnes.com/g/im1.png”,
“http://songnes.com/g/im2.png”,
“http://songnes.com/g/im3.png”,
“http://songnes.com/g/im4.png”,
“http://songnes.com/g/im5.png”,
“http://songnes.com/g/im6.png”,
].map(pic => {
return new THREE.MeshLambertMaterial({map: loader.load(pic)});
});

  var cubeTexture = textureLoader.load(manyImages);

  // CREATE CUBE:
  cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshPhongMaterial({
      color:0xffffff,
      map:cubeTexture,
      bumpMap:cubeBumpMap,
      normalMap:cubeNormalMap
    })
  );
  scene.add( cube );

pictureURL3, is the same as “http://songnes.com/g/im3.png”, - is that how you write it?

when I create the cube I have this:

// CREATE CUBE:
cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshPhongMaterial({
color:0xffffff,
map:cubeTexture,
bumpMap:cubeBumpMap,
normalMap:cubeNormalMap
})
);
scene.add( cube );

it’s confusing, I have: new THREE.MeshLambertMaterial in your code
and I have this in my code: new THREE.MeshPhongMaterial

8

Just out of curiousity: do you have any error messages or warnings in your browser console?

9

g70
Hello: I’m trying to right-click on the left of the web-site on Chrome - it doesn’t let me do anything.

you can click here to see the full code (is short) http://songnes.com/g/g70.txt

I beleive is in the way I put the

var mats = [
“http://songnes.com/g/im1.png”,
“http://songnes.com/g/im2.png”,
“http://songnes.com/g/im3.png”,
“http://songnes.com/g/im4.png”,
“http://songnes.com/g/im5.png”,
“http://songnes.com/g/im6.png”,
].map(pic => {
return new THREE.MeshLambertMaterial({map: loader.load(pic)});
});

I see Lambert in one place an Phong and another
I’m confused!!

10

thanks for this. Real life and time saver.