three.js引入3dmax生成的.obj和.mtl以及对引入模型的移动点击变色操作

最新推荐文章于 2022-03-03 21:02:51 发布
置顶 最新推荐文章于 2022-03-03 21:02:51 发布
阅读量4.7k 收藏 11
点赞数 5
分类专栏： three.js学习 文章标签： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengyinshenlin/article/details/83421177
版权

如上图，为方便代码运行请使用3dmax画如上图的3d模型导出* .obj与* .mtl文件。

代码需要的JS：three.js所所所，OBJLoader.js，MTLLoader.js和jQuery的的1.9.1.min.js

运行代码如下：

<!DOCTYPE html>
<html lang="en">

	<head>
		<title>webgl</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			
			#alert {
				z-index: 200;
				position: absolute;
				top: 100px;
				width: 100%;
				height: 150px;
			}
			
			#alert_center {
				width: 300px;
				height: 150px;
				text-align: center;
				background-color: rgb(255, 255, 255);
				display: none;
			}
			
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display: block;
			}
			
			#info a,
			.button {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
		</style>
	</head>

	<body onload="init();">
		<div id="alert">
			<div id="alert_center">
				<p style="color: red" id="alert_font">
				</p>
			</div>
		</div>
		<div id="info">
			<h1>
    	<a href="#" target="_blank">3D Demo</a>
	</h1>
			<p style="color: darkred">正向控制键：Z X C<br/> 反向控制键：A S D
			</p>
		</div>
		<script src="build/three.js"></script>
		<script src="build/OBJLoader.js"></script>
		<script src="build/MTLLoader.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script>
			var container;
			var objects = [];
			var raycaster = new THREE.Raycaster();
			var mouse = new THREE.Vector2();
			var camera, scene, renderer;
			var  m1, m2, m3;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var cord1 = new THREE.Object3D;
			var cord2 = new THREE.Object3D;
			var cord3 = new THREE.Object3D;
			var fov = 60, //拍摄距离  视野角值越大，场景中的物体越小
				near = 1, //相机离视体积最近的距离
				far = 10000, //相机离视体积最远的距离
				aspect = (window.innerWidth / window.innerHeight); //纵横比
			function init() {
				container = document.createElement('div');
				document.body.appendChild(container);
				camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
				camera.position.set(200, 100, 150);
				scene = new THREE.Scene(); //创建场景
				var ambient = new THREE.AmbientLight(0x101030, 5);
				scene.add(ambient);
				var directionalLight = new THREE.DirectionalLight(0xffeedd, 1); //光源颜色
				directionalLight.position.set(0, 10, 10);
				scene.add(directionalLight);
				var helper = new THREE.GridHelper(1200, 50, 0xCD3700, 0x4A4A4A);
				scene.add(helper);
				var onProgress = function(xhr) {
					if(xhr.lengthComputable) {
						var percentComplete = xhr.loaded / xhr.total * 100;
					}
				};
				var onError = function(xhr) {};
				//加载3dmax的 obj 与 mtl 文件
				var mtlLoader = new THREE.MTLLoader();
				mtlLoader.setPath('obj2/');
				mtlLoader.load('object.mtl', function(materials) {
					materials.preload();
					var objLoader = new THREE.OBJLoader();
					objLoader.setMaterials(materials);
					objLoader.setPath('obj2/');
					objLoader.load('object.obj', function(object) {
						object.scale.multiplyScalar(1);
						object.traverse(function(child) {
							if(child instanceof THREE.Mesh) {
								if(child.name == 'Box001') {
									m1 = child;
								} else if(child.name == 'Box002') {
									m2 = child;
								} else if(child.name == 'Cylinder001') {
									//圆柱
									m3 = child;
								}
							}
						})
						cord3.add(m3);
						cord3.position.set(0, 0, -60);
						m3.position.x -= (cord3.position.x);
						m3.position.y -= (cord3.position.y);
						m3.position.z -= (cord3.position.z);
						cord2.add(m2, cord3);
						cord2.position.set(0, 96, 0);
						m3.position.x -= (cord2.position.x);
						m3.position.y -= (cord2.position.y);
						m3.position.z -= (cord2.position.z);
						m2.position.x -= (cord2.position.x);
						m2.position.y -= (cord2.position.y);
						m2.position.z -= (cord2.position.z);
						cord1.add(m1, cord2);
						scene.add(cord1);
						render();
						return object;
					}, onProgress, onError);

				});

				renderer = new THREE.WebGLRenderer({
					antialias: true
				}); //渲染器
				renderer.setClearColor(0xffffff); //画布颜色
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				container.appendChild(renderer.domElement);
				//浏览器改变事件
				window.addEventListener('resize', onWindowResize, false);
				//鼠标单击书剑
				window.addEventListener('click', clickTest, false);
				//鼠标滚轮控制模型放大缩小
				document.addEventListener('mousewheel', mousewheel, false);
				//键盘事件
				document.addEventListener('keydown', onKeyDown, false);
			}
			//鼠标滑轮
			function mousewheel(e) {
				e.preventDefault();
				if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
					if(e.wheelDelta > 0) { //当滑轮向上滚动时
						fov -= (near < fov ? 1 : 0);
					}
					if(e.wheelDelta < 0) { //当滑轮向下滚动时
						fov += (fov < far ? 1 : 0);
					}
				} else if(e.detail) { //Firefox滑轮事件
					if(e.detail > 0) { //当滑轮向上滚动时
						fov -= 1;
					}
					if(e.detail < 0) { //当滑轮向下滚动时
						fov += 1;
					}
				}
				camera.fov = fov;
				camera.updateProjectionMatrix();
				renderer.render(scene, camera);
			}
			//监听键盘事件
			function onKeyDown(event) {
				//A
				if(event.keyCode == 65) {
					cord1.rotation.y -= 0.1;
				}
				//Z
				if(event.keyCode == 90) {
					cord1.rotation.x += 0.1;
				}
				//X
				if(event.keyCode == 88) {
					cord2.rotation.x += 0.1;
				}
				//s
				if(event.keyCode == 83) {
					cord2.rotation.y -= 0.1;
				}
				//c
				if(event.keyCode == 67) {
					cord3.rotation.x += 0.1;

				}
				//d
				if(event.keyCode == 68) {
					cord3.rotation.y -= 0.1;

				}
				render();
			}
			//点击事件
			function clickTest(event) {　
				event.preventDefault();　
				objects = [];　
				this.mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;　　
				this.mouse.y = -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;　　
				this.raycaster.setFromCamera(this.mouse, this.camera);　　
				this.scene.children.forEach(child => {
					//根据需求判断哪些加入objects,也可以在生成object的时候push进objects
					if(!(child instanceof THREE.GridHelper) && !(child instanceof THREE.DirectionalLight) && !(child instanceof THREE.AmbientLight)) {　
						child.children.forEach(childv => {
							if(childv instanceof THREE.Mesh) { //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
								this.objects.push(childv)　　
							} else if(childv instanceof THREE.Object3D) {
								meshDg(childv.children);
							}
						});
					}
				})
				var intersects = this.raycaster.intersectObjects(this.objects);
				if(intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) {
					selectObject = intersects[0].object;
					changeMaterial(selectObject);
					$("#alert_center").css({
						"display": "block"
					});
					$("#alert_font").html("当前点击的模块名字是：" + selectObject.name);
					render();
				}
			}
			// 改变当前对象属性
			function changeMaterial(object) {
				var material = new THREE.MeshLambertMaterial({
					color: 0xffffff * Math.random()
				});
				object.material = material;
			}
			//递归  收集  THREE.Mesh
			function meshDg(child) {
				child.forEach(childv => {
					if(childv instanceof THREE.Mesh) { //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
						this.objects.push(childv)　　
					} else if(childv instanceof THREE.Object3D) {
						meshDg(childv.children);
					}
				});
			}
			//浏览器发生变化时
			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 render() {
				camera.lookAt(new THREE.Vector3(0, 70, 0));
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>

 

如果觉得自己画3d模型费事的话，下载路径https://download.csdn.net/download/fengyinshenlin/10747073，需要1积分，没办法上传时必须选择积分......

fengyinshenlin
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2中使用three.js导入gltf模型，单击响应变色【学习记录】
weixin_44422213的博客
07-01 244
在一个vue文件里使用两个gltf模型，并且两个模型直接不存在绑定及依赖关系，即相互独立。：点击单个模型，则该模型变色。另一模型不发生任何变化。：按方法来进行一步步导入和处理。
vue使用three.js引入外部obj，mtl模型.zip
05-31
vue使用three.js引入外部obj，mtl模型demo
three.js 引用3dmax 导出的obj与mtl文件及相关模块操作
10-26
three.js 技术导入 3dmax 生成的.obj与.mtl文件后操作3d模块移动及点击模块变色功能，刚刚接触 three.js 写的不好的话欢迎大神指教，谢谢！
ThreeJS加载3D模型
08-09
NULL 博文链接：https://18211103738.iteye.com/blog/2172799
ThreeJS导入外部obj和mtl
永无止境
04-28 7752
本文将介绍 如何使用ThreeJS导入obj和带贴图mtl的外部obj模型； 使用AmbientLight为场景所有物体添加基础光源； 使用SpotLight为场景添加聚光灯效果，并为obj添加阴影效果； 使用SpotLightHelper，为聚光灯添加光源调试辅助线； 使用GUI，添加一些简单的属性操作obj模型； 本文代码结构将在之前的文章VUE整合ThreeJS并创建一个带动画的简单场景代码的基础上进行修改。 效果预览 一、导入外部模型OBJ 首先引入所需的包 import..
68 Three.js 导入OBJ格式和MTL的格式
现在学习也不晚
03-19 8361
简介 OBJ和MTL是相互配合的两种格式，经常一起使用。OBJ文件定义几何体，而MTL文件定义所用的材质。OBJ和MTL都是基于文本的格式。 Three.js可以很好地理解OBJ文件和MTL文件，而且Blender也支持这两种文件格式。所以作为替代方案，你也可以在Blender里选择OBJ/MTL格式的文件，而不是Three.js的JSON格式文件。在Three.js里提供两种不同的加载器。如...
three.js和高德地图结合引入obj格式模型.zip
06-27
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
vue页面引入three.js实现3d动画场景操作
10-14
Three.js是一个基于JavaScript的WebGL库，它使得在浏览器中构建3D模型和动画变得更加简单。下面将详细介绍如何在Vue中引入和使用Three.js，以及相关插件的安装。 首先，你需要通过npm来安装Three.js库。在命令行中...
工厂3D模型下载，源文件max，obj+mtl格式，threejs模型
08-27
3. **three.js应用**：在web项目中，可以使用three.js加载.obj和.mtl文件，将工厂3D模型集成到网页中，实现3D交互体验。 总之，这个工厂3D模型资源包为学习3D建模、了解three.js和WebGL开发，以及进行3D内容的二次...
使用three.js加载3dmax资源，以及实现场景中的阴影效果
weixin_34198797的博客
07-12 788
使用three.js可以方便的让我们在网页中做出各种不同的3D效果。如果希望2D绘图内容，建议使用canvas来进行。但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果，更是不清楚到底如何导入我们已经制作好的3dmax资源。所以这篇教程将简要介绍如何将我们用3dmax制作好的资源导入进来，以及如何为我们导入的资源，包括所有自己绘制的图形添加阴影。也有很多小伙伴表示根本记不住...
THREEJS导入外部OBJ+MTL后内存优化
永无止境
01-20 2571
背景 近期做一个关于石油化工的3D数字孪生项目，模型均为客户那边提供，模型文件是obj+mtl+jpg组合。因为有较多局部控制动画，所以建模被要求拆分成多个obj模型，然后在场景中自动组合使用。 现象 用THREEJS加载模型添加到场景中后发现两个问题： 1.渲染速度很慢； 2.如果浏览器同时开两个或窗口，那么会出现黑屏闪一下，然后页面就全白了，场景也都没了（如下图所示）。 调查 经过调查发现，打开一个窗口时，GPU内存被占用3.6G，打开两个的时候直接飙到5.2G，我...
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
Three.js加载obj+mtl文件，（机房演示效果图）
12-26
压缩文件包含了一个使用Three.js框架加载obj+mtl模型文件的3d机房实例效果，可用于参考如何使用Three.js加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行（使用火狐浏览器），或者开启本地服务运行也可以。
OBJLoader.js 下载
05-13
OBJLoader.js文件，与Three.js配套使用，渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
.obj文件格式与.mtl文件格式(转)
sinat_30751333的博客
03-23 4884
.obj文件格式与.mtl文件格式
Three.js加载OBJ模型或FBX模型
weixin_42358094的博客
03-03 3669
Three.js加载常用OBJ与FBX
基于WebGL/Threejs技术的BIM模型轻量化之图元合并
aaa407217484的博客
08-21 1046
伴随着互联网的发展，从桌面端走向Web端、移动端必然的趋势。互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化。随着WebGL标准被广泛接受，出现了许多基于HTML5的开源三维引擎，如threejs、scenejs等。尤其threejs使用非常广泛，一方面由于其...
从3dMax导出供threeJS使用的带动作模型与加载（认真修改详尽版）
weixin_33939843的博客
04-29 1900
评论区发现的建议，最近没空测试，先贴这 还有好多人说找不到插件的 https://pan.baidu.com/s/1Q5g0... 密码：b43e 。 应该是他们现在只是维护blender，只有这个的插件，不如改用blender？ 在自己做的一个小玩意中，发现要从3dMax中导出js文件供给threeJS使用，真是太多坑了！所以打算详细...
js点击标签后背景颜色改变_手写动态 3D 蛛网图 | THREE.js
weixin_39548787的博客
11-24 260
?雷达图容易误用，所以我一般不用。从数据可视化的最佳实践来说，不推荐 3D，因为透视关系导致无法准确比较。同时，不推荐动态图，人老了后看起来眼花，当然某些场景下引入时间维度后，可以增强信息密度，如?动态柱状图和?动态折线图。我们做人有原则，要么严格遵守，要么三条一起破坏。所以，今天做一个 3D 的、动态的雷达图。最后选择用 THREE.js 实现主体，用 DOM 实现控件和交互。Hack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值