We Keep Coding

three.js cube each face is a different texture [duplicate]

I'm trying to create a three.js cube with different textures on each face.
Basically a dice. This is in my sandbox environment, so should just product a rotating cube with dice images (1-6) on each side. Once done I intend to use this for a browser base game. This example I have only tested in Chrome, although contemplating changing it to a canvas renderer for additional browser support.
Had a look at a few questions here on SO and a substantial amount of other googling, and though I had the answer (seemed reasonably simple actually) but I simply cannot get it to work.
I am reasonably new to three.js, but not JavaScript.
Pages I used for reference are
SO - three.js cube with different texture on each face
SO - three.js cube with different texture faces
evanz - Test three.js cube
and enriquemorenotent.com - three.js building a cube with different materials on each face
My Code
var camera, scene, renderer, dice;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(110, 110, 250);
camera.lookAt(scene.position);
scene.add(camera);
var materials = [
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-1-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-2-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-3-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-4-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-5-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-6-hi.png')
})
];
dice = new THREE.Mesh(
new THREE.CubeGeometry(562, 562, 562, 1, 1, 1, materials),
new THREE.MeshFaceMaterial());
scene.add(dice);
}
function animate() {
requestAnimationFrame(animate);
dice.rotation.x += .05;
dice.rotation.y += .05;
dice.rotation.z += .05;
renderer.render(scene, camera);
}
The error I am getting is
Uncaught TypeError: Cannot read property 'map' of undefined
from three.js line 19546 (not the min version) WHichi is the bufferGuessUVType(material) function - material is undefined. Which leads me to believe something is not right in one/all of my material definitions.
Using three.js r58.
There is really no HTML or CSS, just the JS at this point
I can quite happily get a cube rotating with the same image on all six sides but not with different images. The images are just the images of a dice dots, 1 - 6.
Given a bit more time I could do a fiddle if required

EDIT: THREE.MultiMaterial has been deprecated. You can now pass the materials array directly into the constructor. Like so:
dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );
scene.add( dice );
Be careful of copying old examples from the net.
Always check the Migration Wiki for help upgrading to the current version.
three.js r.85

Three.js: flip image loaded with loadTextureCube

I have a legacy code snippet that has long since been part of a web application. The goal is to render a cube from 6 image urls via three.js. The problem is, that the bottom image is flipped around on its y axis. All other sides look fine.
There is no way to flip the original image, since they are provided by an external service. Also when I open the bottom image directly, it is displayed correctly, only in the three.js cube its flipped.
Since I have no prior experience with three.js, I first looked at the documentation for this functionality and realized that the code used in our script is deprecated. unfortunately there is no detailed documentation of the old function (THREE.ImageUtils.loadTextureCube) - or I was simply unable to find it (if someone knows where it is, a link would be great!).
I know that for the long term, a reimplementation to replace all deprecated functions would in order, but since this would take a lot more time (for someone unfamiliar with three.js), I first wanted to check if the problem can be fixed using the existing code base.
I read in various other posts/issues that this is a known issue because three.js for some internal reason defaults to flipY=true on textures. The problem I have is that I don't know (due to lack of documentation) how to change this parameter on one side of the cube only. I expect a function can be applied to the loader that could update this parameter for one of the images or a transformation could be applied to the loaded image afterwards.
I really hope somebody knows (remembers) how this can be achieved with the old loader function.
The following partial code is from my script:
// passed list of urls (images.bottom is flipped around)
var urls = [ images.left, images.right, images.top, images.bottom, images.back, images.front ];
// SCENE
scene = new THREE.Scene();
// TEXTURES
textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
// MATERIALS
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
var cubeGeometry = new THREE.BoxGeometry(50,50,50);
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
scene.add( cube );
// RENDER
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( containerWidth, containerHeight );
renderer.setFaceCulling( THREE.CullFaceNone );
$container.append( renderer.domElement );
...

Three.js - WebGL Rendering Canvas remains black

I recently started to work with WebGL by using the Threejs libary.
I tried to create some sort of image viewer, but I just can't seem to figure out how to do it right.
I want to display the image, a texture fetched from a HTML5-Canvas, on a PlaneGeometry object.
My code looks like this:
var RunWebGL = function(img, canvas){
var renderer = new THREE.WebGLRenderer();
renderer.setSize(img.width, img.height);
document.body.append(renderer.domElement);
//Init the Scene;
var scene = new THREE.Scene();
//Init the Camera;
var camera = new THREE.PerspectiveCamera(70, img.width/img.height, 1, 1000);
scene.add(camera);
//Init the texture from the image displayed in the canvas. Then use this image to create the Mesh used to give the created plane a texture;
var texture = new THREE.Texture(canvas);
var material = new THREE.MeshBasicMaterial({map : texture});
var geometry = new THREE.PlaneGeometry(img.widht, img.height);
var mesh = new THREE.Mesh(geometry, material);
//Init the Geometry and the texture(material) and mesh it together;
scene.add(mesh);
renderer.setClearColor(0xEEEEEE);
texture.needsUpdate = true;
renderer.render(scene, camera);
};
The HTML5-Canvas, which provides the image, displays it as expected.
Everything I get from the WebGL part tho is a black square everytime this code executes. On the search for an answer on this problem, I added "renderer.setClearColor();" - Which hasn't changed anything, execpt that I'm now getting a smooth grey instead of a dead black square.
I'm getting no Errors/Warnings/Whatsoever.
The img-object that is passed into my RunWebGL function is a standard JavaScript Image object.
If I could use this image as a texture instead of the canvas, I would be really happy. But an answer using the Canvas, or even a hint could help to decrease my struggle.
//Edit: I have created a JS-Fiddle that shows my problem. Here's the link: https://jsfiddle.net/a5ufknLu/2/
Cheers and thanks in advance,
Michael

Three.js cube with different texture on each face

I'm trying to create a three.js cube with different textures on each face.
Basically a dice. This is in my sandbox environment, so should just product a rotating cube with dice images (1-6) on each side. Once done I intend to use this for a browser base game. This example I have only tested in Chrome, although contemplating changing it to a canvas renderer for additional browser support.
Had a look at a few questions here on SO and a substantial amount of other googling, and though I had the answer (seemed reasonably simple actually) but I simply cannot get it to work.
I am reasonably new to three.js, but not JavaScript.
Pages I used for reference are
SO - three.js cube with different texture on each face
SO - three.js cube with different texture faces
evanz - Test three.js cube
and enriquemorenotent.com - three.js building a cube with different materials on each face
My Code
var camera, scene, renderer, dice;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(110, 110, 250);
camera.lookAt(scene.position);
scene.add(camera);
var materials = [
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-1-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-2-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-3-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-4-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-5-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-6-hi.png')
})
];
dice = new THREE.Mesh(
new THREE.CubeGeometry(562, 562, 562, 1, 1, 1, materials),
new THREE.MeshFaceMaterial());
scene.add(dice);
}
function animate() {
requestAnimationFrame(animate);
dice.rotation.x += .05;
dice.rotation.y += .05;
dice.rotation.z += .05;
renderer.render(scene, camera);
}
The error I am getting is
Uncaught TypeError: Cannot read property 'map' of undefined
from three.js line 19546 (not the min version) WHichi is the bufferGuessUVType(material) function - material is undefined. Which leads me to believe something is not right in one/all of my material definitions.
Using three.js r58.
There is really no HTML or CSS, just the JS at this point
I can quite happily get a cube rotating with the same image on all six sides but not with different images. The images are just the images of a dice dots, 1 - 6.
Given a bit more time I could do a fiddle if required

EDIT: THREE.MultiMaterial has been deprecated. You can now pass the materials array directly into the constructor. Like so:
dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );
scene.add( dice );
Be careful of copying old examples from the net.
Always check the Migration Wiki for help upgrading to the current version.
three.js r.85

Safari Mobile - Crashing - Three JS Texture not loading up

I am trying to create a spherical panorama using THREE.js. It works great on Safari Desktop but crashes on Safari Mobile on the iPAD. It has something to do with the way I'm loading up the texture image.
A few things I've tried
I'm using the Canvas Renderer
Tried loading up an image of a smaller size.
Tried loading up a power of 2 texture image.
Tried loading the Sphere with a wireframe material - It works!
Here's my code.
http://pastebin.com/1nwTMHJV
sceneHolder = document.getElementById( 'sceneHolder' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, SCENE_WIDTH / SCENE_HEIGHT, 1, 10000 );
camera.position.z = 0;
scene.add( camera );
var sphereGeom = new THREE.SphereGeometry( 200, 20, 20 );
//NOTE: If we add {},function(){render()} in the following, it stops working!
var sphereTexture = THREE.ImageUtils.loadTexture('media/vr/testpot.jpg');
mesh = new THREE.Mesh(sphereGeom,new THREE.MeshBasicMaterial({map:sphereTexture,overdraw:true}));
//So that we see the inside of the sphere too!
mesh.doubleSided=true;
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCENE_WIDTH, SCENE_HEIGHT );
sceneHolder.appendChild( renderer.domElement );
Here's my post on THREE.js
https://github.com/mrdoob/three.js/issues/1529
Also: https://github.com/mrdoob/three.js/issues/1550
Thanks
smaira

I tried, lowering number of faces can run on iPad, but it's just ugly.
you may try:
var sphereGeom = new THREE.SphereGeometry( 200, 10, 10 );
and the safari crash at the time of render
renderer.render( scene, camera );
conclusion:
if load image texture to sphere with too many faces, iPad will crash