Multiple texture
HTML
<div id="info">Multiple Material</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
CSS
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
overflow: hidden;
}
JavaScript
var camera, scene, renderer, light, controls;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
scene.add(camera);
THREE.ImageUtils.crossOrigin = '';
var texture1 = THREE.ImageUtils.loadTexture('http://jyunming-chen.github.io/tutsplus/images/chia.jpg');
var texture2 = THREE.ImageUtils.loadTexture('http://jyunming-chen.github.io/tutsplus/images/stone.jpg');
var plane;
var geom = new THREE.PlaneGeometry(100, 100, 4, 4);
var material1 = new THREE.MeshBasicMaterial({
map: texture1,
//side: THREE.DoubleSide,
transparent: true,
opacity: 0.315
});
var material2 = new THREE.MeshBasicMaterial({
map: texture2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.315
});
/* var material2 = new THREE.MeshBasicMaterial ({
wireframe: true
});
*/
// create a multimaterial
var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [material1, material2]);
scene.add(plane);
light = new THREE.PointLight(0xffffff);
light.position.set(100, 300, 200);
scene.add(light);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x888888);
controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}