three.js cube六面貼圖

時間 2019-11-10

原文原文鏈接

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。