I'm currently experimenting with wrapping images around a cube in three.js and encountering the error message 'THREE.MeshFaceMaterial has been removed. Use an Array instead.' from my previous research, it seems like the method I am trying to use might no longer be available. Does anyone know of a new method that could be used for this purpose? I have included the code below for reference. Any assistance would be greatly appreciated. Thank you in advance, Mike.
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ParallaxBarrierEffect.js"></script>
<script>
(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function ()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
//var effect = new THREE.ParallaxBarrierEffect(renderer);
//effect.setSize(window.innerWidth, window.innerHeight);
controls = new THREE.OrbitControls(camera, renderer.domElement)
/* var loader = new THREE.ObjectLoader();
loader.load
(
'models/skull.json',
function(object)
{
scene.add(object);
}
);
*/
var geometry = new THREE.CubeGeometry(10000,10000,10000);
var cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/right.png'), side: THREE.DoubleSide}), // RIGHT SIDE
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/left.png'), side: THREE.DoubleSide}), // LEFT SIDE
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/top.png'), side: THREE.DoubleSide}), // TOP SIDE
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/bottom.png'), side: THREE.DoubleSide}), // BOTTOM SIDE
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/front.png'), side: THREE.DoubleSide}), // FRONT SIDE
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/back.png'), side: THREE.DoubleSide}) // BACK SIDE
];
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cube);
camera.position.z = 3;
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.3);
scene.add(ambientLight);
var light1 = new THREE.PointLight(0xFF0040, 4, 5);
//scene.add(light1);
var light2 = new THREE.PointLight(0x0040FF, 2, 5);
//scene.add(light2);
var light3 = new THREE.PointLight(0x80FF80, 4, 5);
//scene.add(light3);
var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
directionalLight.position.set(0,1,0);
//scene.add(directionalLight);
var spotLight = new THREE.SpotLight(0xFF45F6, 200);
spotLight.position.set(0,3,3);
//scene.add(spotLight);
var update = function()
{
//cube.rotation.x += 0.01;
//cube.rotation.z += 0.005;
var time = Date.now() * 0.0005;
light1.position.x = Math.sin(time + 0.7) * 30;
light1.position.x = Math.cos(time + 0.5) * 40;
light1.position.x = Math.cos(time + 0.3) * 30;
light2.position.x = Math.cos(time + 0.3) * 30;
light2.position.x = Math.sin(time + 0.5) * 40;
light2.position.x = Math.sin(time + 0.7) * 30;
light3.position.x = Math.sin(time + 0.7) * 30;
light3.position.x = Math.cos(time + 0.3) * 40;
light3.position.x = Math.sin(time + 0.5) * 30;
};
var render = function()
{
renderer.render(scene, camera);
};
var GameLoop = function()
{
requestAnimationFrame(GameLoop);
update();
render();
};
GameLoop();
</script>