CODEWITHSUNDEEP
javascriptthree.js
Jonathan Mattox
Jonathan Mattox

Reputation: 71

Three Js How To Map A Different Random Image On All Sides Of A Cube In A Group Of Cubes

I am trying to incorporate something similar to the example at:

http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html

I've got the cubes themselves to work fine, but I want to map a different image on each cube.

For example, I want one of the cubes to have a "Blogger" icon wrapped on each side, and a "Facebook" icon wrapped on each side of a different cube, and a "Twitter" icon wrapped on each side of a third cube,...ect, ect.

I've gotten a mapurl to work fine with just one cube, but I am having trouble mapping images when it comes to the Object3D group.

I am new to WebGL and Three Js, and any help would be greatly appreciated, Thanks! :)

Upvotes: 4

Views: 2554

Answers (2)

Jay_Lu
Jay_Lu

Reputation: 310

At this moment (December 2017) ImageUtils.loadTexture, MeshFaceMaterial and CubeGeometry are no longer in use (deprecated). https://threejs.org/docs/#api/deprecated/DeprecatedList

New way of doing this is:

var geometry = new THREE.BoxGeometry( 10, 10, 10);
var material = [
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image6.jpg' ) } )
];

var mesh = new THREE.Mesh( geometry, material );

Here's a link to an excellent short tutorial explaining that process: https://www.youtube.com/watch?v=l77yAZ0E950

Upvotes: 0

mrdoob
mrdoob

Reputation: 19592

This is how it's done since r53:

var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshFaceMaterial( [
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image6.jpg' ) } )
] );

var mesh = new THREE.Mesh( geometry, material );

Upvotes: 3

Related Questions