three.js cube六面贴图

最新推荐文章于 2023-07-25 17:03:32 发布

weixin_30355437

最新推荐文章于 2023-07-25 17:03:32 发布

阅读量447

点赞数

原文链接：http://www.cnblogs.com/onestow/p/6336539.html

版权

 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>

转载于:https://www.cnblogs.com/onestow/p/6336539.html

weixin_30355437

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js cube六面贴图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>texture</title> 5 <script src="js/three.min.js"></script> 6 <style> 7 b...
复制链接

扫一扫