3dmax模型在web端

最新推荐文章于 2023-11-30 16:48:39 发布

山崎贤人_学长

最新推荐文章于 2023-11-30 16:48:39 发布

阅读量6.7k

点赞数 2

分类专栏： web前端文章标签： 3dmax

本文链接：https://blog.csdn.net/weixin_40935473/article/details/86673641

版权

web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

大家都知道3dmax是制作模型如果学会了，ps也就可以不用学了
但是在web端应用少
所以今天讲解一下导入web端

3dmax生成软件后就
生成2个文件：xx.mtl和xx.obj

将二个文件放到你的web也面
因为是模型所以都知道必须是用到three.js 3D模型js
具体代码
我在其中加入键盘事件使之动起来，
因为工作马上离开原因把自己弄过的项目和代码写一下要不会忘记

<head>
	<meta lang="en">
	<meta charset="UTF-8">
	<title>实现3dmax模型</title>
	<script type="text/javascript" src="js/three.js"></script>
	<script type="text/javascript" src="js/OBJLoader.js"></script>
	<script type="text/javascript" src="js/MTLLoader.js"></script>
</head>
<style>
	 /*{
		margin: 0;
		padding: 0;
	}
	
	canvas {
		width: 100%;
		height: 100%;
	}*/
</style>

<body "init()">
	<canvas id="mainCanvas" width="1000px" height="600px"></canvas>
</body>

// mesh.rotation.y += 0.01; //添加动画
// mesh.rotation.z += 0.01;
// mesh.rotation.x += 0.01;
if(mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}

}

// 键盘控制 上下左右
document.onkeydown = function(event) {
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(e && e.keyCode == 37) { // 左
		mesh.rotation.z += 0.05;
	}
	if(e && e.keyCode == 38) { // 上 逆时针
		mesh.rotation.y += 0.05;
	}
	if(e && e.keyCode == 39) { // 右
		mesh.rotation.z -= 0.05;
	}
	if(e && e.keyCode == 40) { // 下 顺时针
		mesh.rotation.y -= 0.05;
	}
	
	if(e && e.keyCode == 81) { // 前q
		 mesh.rotation.x += 0.05;
	}
	if(e && e.keyCode == 72) { // 后h
		mesh.rotation.x -= 0.05;
	}
};

// 模型
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) {};
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/uploads/160601/obj/');
mtlLoader.load('绿色茶壶.mtl', function(materials) {
	materials.preload();
	var objLoader = new THREE.OBJLoader();
	objLoader.setMaterials(materials);
	objLoader.setPath('/uploads/160601/obj/');
	objLoader.load('绿色茶壶.obj', function(object) {
		object.position.y = -0.5;
		//object.position.x = -10;
		//object.position.z = -10;
		scene.add(object);
	}, onProgress, onError);
});