1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>texture</title> 5 <script src="js/three.min.js"></script> 6 <style> 7 body { 8 margin:0; 9 overflow:hidden; 10 } 11 </style> 12 <script> 13 var materials = []; 14 var textureLoader; 15 function init() { 16 textureLoader = new THREE.TextureLoader(); 17 load_textures([‘img/01.png‘, ‘img/02.png‘, ‘img/03.png‘, ‘img/04.png‘, ‘img/05.png‘, ‘img/06.png‘], 0) 18 } 19 20 //加载纹理 21 function load_textures(to_load, loadedIndex) { 22 if(loadedIndex == to_load.length) { 23 solve(); //加载纹理完毕后开始初始化并渲染场景 24 return; 25 } 26 textureLoader.load(to_load[loadedIndex], function(tex) { 27 //loadedtex[to_load[loadedIndex]] = tex; 28 materials[loadedIndex] = (new THREE.MeshBasicMaterial({map:tex, overdraw: true})); 29 load_textures(to_load, loadedIndex+1); 30 }); 31 } 32 33 function solve() { 34 var sw = window.innerWidth; 35 var sh = window.innerHeight; 36 37 var scene = new THREE.Scene(); 38 39 var camera = new THREE.PerspectiveCamera(45, sw / sh, 0.1, 1000); 40 camera.position.set(0, 0, 150); 41 camera.lookAt(scene.position); 42 43 var renderer = new THREE.WebGLRenderer(); 44 renderer.setClearColor(0x000000); 45 renderer.setSize(sw, sh); 46 47 //var ambLight = new THREE.AmbientLight("#ffffff"); 48 //scene.add(ambLight); 49 50 console.log(materials); 51 var cube = new THREE.Mesh( 52 new THREE.CubeGeometry(50, 50, 50), 53 new THREE.MultiMaterial(materials) 54 ); 55 scene.add(cube); 56 57 document.getElementById("webGL").appendChild(renderer.domElement); 58 render(); 59 60 function render() { 61 cube.rotation.x+=0.01; 62 cube.rotation.y+=0.01; 63 cube.rotation.z+=0.01; 64 requestAnimationFrame(render); 65 renderer.render(scene, camera); 66 } 67 } 68 window.onload = init(); 69 </script> 70 </head> 71 <body> 72 <div id="webGL"></div> 73 </body> 74 </html>
原文：http://www.cnblogs.com/onestow/p/6336539.html