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

最新推荐文章于 2024-03-15 22:10:36 发布
最新推荐文章于 2024-03-15 22:10:36 发布
阅读量2.9k 收藏 6
点赞数 1
分类专栏： threeJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44601948/article/details/108502830
版权

目录

效果图

在这里插入图片描述

全部代码

<!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>

另： Vue版的

澜漾
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Html显示3D Obj模型(支持mtl纹理)的源码方案（3:项目完结）
softboy安卓软件
05-05 1557
不要瞧不起html脚本语言，自从浏览器取消了flash，你是不是觉得html做不了炫酷的内容，错了！现在html支持OpenGL，支持直接渲染3D游戏。今天我们就来讲如何在html渲染3D 的Obj模型。并支持贴纹理mtl，使用起来真的是不要太方便了。 【订阅获得源码方案，在文章最后】 先看下效果的视频把： html h5展示用图片一键创建的3D Object模型支持 看了前面两个章节，对这个项目一定是有一定的了解了。这个源码是用于展示html模型，结合用的软件导出人物模型，组合成一个项目。本章是
player-shoutcast-html5:响应式HMTL5 Web Player，用于SHOUTCast和Icecast流媒体播放，带有封面和歌词
05-01
播放器SHOUTCast和Icecast HTML5 响应式网络播放器，带有用于SHOUTCast和Icecast流媒体的歌词。 感谢添加了Icecast支持。 必需的： PHP> = 5.3 卷曲 安装 只需将文件放入服务器 在根目录的config.js文件中配置播放器 设置您的网络收音机的名称 设置您的流媒体URL（末尾不带/ ） 设置您的Vagalume的API密钥作为歌词（） 用于SHOUTCast和Icecast流式传输HTML5 Player，其信息如下： 当前歌曲 播放歌曲的历史记录（未经SHOUTCast V1测试） 当前歌曲的封面（ ） 当前歌曲的歌词（ ） 响应式设计 键盘控制 M静音/取消静音 P和space -播放/暂停 arrow up和arrow down -增大/减小音量 0 to 9体积百分比
three.js加载obj+mtl文件源码
03-21
three.js加载obj+mtl文件 给obj模型添加纹理
vue使用three.js引入外部obj，mtl模型.zip
05-31
vue使用three.js引入外部obj，mtl模型demo
Html+threejs数字孪生三维场景实现
最新发布
alicema1111的博客
03-15 1094
这篇博客针对《Html+threejs数字孪生三维场景实现》编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
Three.js加载obj+mtl文件，（机房演示效果图）
12-26
压缩文件包含了一个使用Three.js框架加载obj+mtl模型文件的3d机房实例效果，可用于参考如何使用Three.js加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行（使用火狐浏览器），或者开启本地服务运行也可以。
java加载obj，stl模型资源，html页面展示
03-05
java加载obj，stl模型资源，html页面展示。 部署即可运行，提供基础数据样例展示
three.js加载obj模型的实例代码
11-30
three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。好了，下面通过一段代码给大家介绍three.js加载obj模型，具体代码如下所示： <!DOCTYPE html> <html> <head> [removed][removed] [removed][removed] <script type="tex
网页导入3D模型-obj/mtl文件
weixin_45411740的博客
04-26 4347
具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/three.js"></script> &lt
three.js 加载obj+mtl模型
dmyc1027的博客
05-22 4668
本文提供了three.js中 实现将obj+mtl模型加载到场景中 的方法。 我们欲实现将桥模型加载到场景中，并对桥设置透明度： 实现过程： 分别导入three.js中的OBJLoader，MTLLoader，将mtl材质加载到obj模型上。 加载时在函数体内编写代码，对材质的透明度属性进行设置。本mtl材质由多个子模型material.wire组成，故在设置时需要对多个子模型进行设置。transparent为是否使用透明度，opacity为透明度数值。当然，也可以仅对一个子模型进行设置，从
threeJS 模型中加载html页面
jinse29的博客
04-10 2283
CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，操作Dom元素的positionh和rotation属性来创建动画。/*** CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，Dom => Object3D* 操作Dom元素的positionh和rotation属性来创建动画*///创建控件对象。
使用three.js加载obj+mtl文件
热门推荐
红鹤的博客
01-05 3万+
因在项目中运用到WEBGL的技术。所以研究了一下下。three.js库看来十分强大,此处为加载带材质的obj文件 1.下载相关js    https://threejs.org/     thee.js可去官网下载最新版本 2.搭建基本的wenGL场景 body{ margin: 0; overflow: hidden; }
使用THREE.js加载obj文件
10-25
使用THREE.js加载obj文件
Zip 压缩、解压技术在 HTML5 浏览器中的应用
weixin_34375054的博客
04-12 132
JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。在 web 应用中，免不了需要从 web 服务器中获取资源，如果可以将所有的资源都合并到一个 .zip 文件中，这时候只需要做一次请求，这样既减少了服务器的压力，同时也可以加快 web 应用的呈现速度。 今天就来探讨下 JSZip 如何与 HT 拓扑应用结合。先来看看这期 Demo 的效果图： 第一步、...
three.js加载.obj文件和贴图.mtl
qq_38974376的博客
01-29 9523
使用three.js加载obj文件和贴图.mtl three.js webgl - OBJLoader2 basic usage body { font-family: Monospace; background-color: #000; color: #fff; margin: 0 0 0 0; padding: 0 0
64位程序怎么判断指针是否有效_串口接收程序遇到的那些问题
weixin_39527372的博客
11-20 127
上两篇文章介绍了设计串口协议的基础知识，接下来的几篇将介绍在编写调试串口代码时可能遇到的一些问题。以下内容不会用太多的笔墨描述如何写发送、接收函数，而是重点关注串口接收过程中可能遇到的一些问题，如果说描述到了发送、接收函数，别会错意，顺带的。以下大部分问题都是因为采用 RXNE(接收不为空)中断方式导致的问题，只有一个问题是鱼鹰从前没有考虑到，也是 IDLE + DMA 方式不可忽略的问题。这就是...
THREEJS导入外部OBJ+MTL后内存优化
永无止境
01-20 2434
背景 近期做一个关于石油化工的3D数字孪生项目，模型均为客户那边提供，模型文件是obj+mtl+jpg组合。因为有较多局部控制动画，所以建模被要求拆分成多个obj模型，然后在场景中自动组合使用。 现象 用THREEJS加载模型添加到场景中后发现两个问题： 1.渲染速度很慢； 2.如果浏览器同时开两个或窗口，那么会出现黑屏闪一下，然后页面就全白了，场景也都没了（如下图所示）。 调查 经过调查发现，打开一个窗口时，GPU内存被占用3.6G，打开两个的时候直接飙到5.2G，我...
vue中使用three.js加载各种模型文件（obj,mtl,fbx,dxf）(封装
不上班老板怎么买房买车
03-16 1万+
three初学者,可以直接上手的模型加载（有啥问题评论吖，不定时维护
ThreeJs之 加载OBJ和MTL文件
Rock的专栏
05-16 2323
import { DDSLoader } from '/three.js/three.js-master/examples/jsm/loaders/DDSLoader.js'; import { MTLLoader } from '/three.js/three.js-master/examples/jsm/loaders/MTLLoader.js'; import { OBJLoader } from '/three.js/three.js-master/examples/jsm/loaders/OBJ.
CDN方式安装three.js
07-29
要通过CDN方式安装three.js，可以按照以下步骤进行操作： 1. 在你的HTML文件中，添加以下代码来引入three.js的CDN链接： ```html <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> ``` 这将会从jsDelivr的CDN服务加载three.js的最新版本。 2. 接下来，你可以在你的JavaScript代码中使用three.js提供的功能了。例如，你可以创建一个场景、添加几何体、应用材质等等。 ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建几何体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); // 将几何体添加到场景中 scene.add(cube); // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); // 将渲染器的输出添加到HTML页面中 document.body.appendChild(renderer.domElement); // 渲染场景 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 这是一个简单的示例，展示了如何使用three.js创建一个旋转的立方体，并将其渲染到页面上。 通过以上步骤，你就可以通过CDN方式安装并使用three.js了。记得在实际项目中，你可能需要根据你的需求引入其他的three.js模块或者使用其他的CDN链接。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值