HTML版的使用three.js加载obj和mtl文件并上贴图_html引入mtl文件

作者：Gausst松鼠会 | 2024-02-16 18:03:34

踩

html引入mtl文件

效果图

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - loaders - OBJ MTL loader</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
		</style>
	</head>

	<body>

		<script src="jszip-master/dist/jszip.js"></script>
		<!-- <script src="https://cdn.bootcss.com/jszip/2.1.0/jszip.min.js"></script> -->
		<script src="jszip-master/vendor/FileSaver.js"></script>
		<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/three.min.js"></script>
		<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/MTLLoader.js"></script>
		<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/OBJMTLLoader.js"></script>
		<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/OrbitControls.js"></script>



		<script>
			console.log(THREE)
			// const ZipFiles = []
			
			// JSZipUtils.getBinaryContent('https://cdn.meixuan3d.com.cn/AI/2020/8/19/zip/6972277f46c24ac5a184167c2d930c7c.zip', function(err, data) {
			//     if(err) {
			//         throw err; // or handle err
			//     }
			
			//     JSZip.loadAsync(data).then(function (e) {
			// 		console.error(e)
			// 		for(let [i,j] of Object.entries(e.files)){
			// 			console.log(j)
						
			// 			// e.file(j.name).async("string").then(function (data) {
			// 			// 	ZipFiles.push(data)
			// 			//   console.log(data)
			// 			// });
						
			// 			// if (JSZip.support.uint8array) {
			// 			//   zip.file("hello.txt").async("uint8array").then(function (data) {
			// 			//     // 使用二进制数组存储文本内容
			// 			//   });
			// 			// }
						
			// 		}
			//     });
			// });
			// let FN = ()=>{
			// 	new Promise((RES,REJ)=>{
			// 		RES({
			// 			OBJ:
			// 		})
			// 	})
			// }


			var container, stats;
			var camera, scene, renderer;
			var mouseX = 0,
				mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			// animate();

			function init() {
				container = document.createElement('div');
				document.body.appendChild(container);
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
				camera.position.z = 1.5; //̹��40
				scene = new THREE.Scene();
				var light = new THREE.AmbientLight("#deebf7", 0.9); // soft white light
				scene.add(light);
				var onProgress = function(xhr) {
					if (xhr.lengthComputable) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log(Math.round(percentComplete, 2) + '% downloaded');
					}
				};
				var onError = function(xhr) {};
				var loader = new THREE.OBJMTLLoader();
				var textureLoader = new THREE.TextureLoader();
				loader.load('https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.obj', 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.mtl', function(object) {
					console.log(object)
					object.position.y = -0;
					object.scale.x = 4;
					object.scale.y = 4;
					object.scale.z = 4;
					textureLoader.load('mesh.png', function(texture) {
						object.children[0].material.map = texture;
						object.children[1].material.map = texture;
						object.children[0].material.needsUpdate = true;
						object.children[1].material.needsUpdate = true;
						scene.add(object);
					})
					var start = new Date().getTime(),
						delta;
					(function anime() {
						delta = new Date().getTime() - start;
						object.rotation.y = delta / 1000;
						renderer.render(scene, camera);
						// requestAnimationFrame(anime);
						return
					})();
				}, onProgress, onError);
				
				
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				container.appendChild(renderer.domElement);
				window.addEventListener('resize', onWindowResize, false);
				var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
				controls.addEventListener('change', render); //监听鼠标、键盘事件
			}

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function animate() {
				requestAnimationFrame(animate);
				render();
			}

			function render() {
				camera.lookAt(scene.position);
				renderer.render(scene, camera);
			}
			setTimeout(()=>{
				render()
			},1000)
		</script>

	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

另： Vue版的

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/95893

HTML版的使用three.js加载obj和mtl文件并上贴图_html引入mtl文件

目录

效果图

全部代码

另： Vue版的