写点什么

Three.js 杂记(六)——3D 模型

用户头像
空城机
关注
发布于: 2021 年 03 月 22 日
Three.js杂记(六)——3D模型

在 three.js 程序的制作与编写过程中,当然不可避免的会遇到一个问题。那就是自己建立一个场景和人物需要有一个 3D 模型

3D 模型的导入

3D 模型由顶点(vertex)组成,顶点之间连成三角形或四边形(在一个平面上),多个三角形或者四边形就能够组成复杂的立体模型


虽然在 three.js 可以使用提供的几何图形去堆积起一个 3D 模型,奈何本作者的美术水平远远不过关,以下模型可做对比

网上找的 3D 模型

自己做的 3D 模型

3D 模型能够让我们制作的场景更加具有表现力,并且一些场景可以直接通过 3D 模型导入,避免重新绘制带来的重复性


目前在网上找 3d 模型的软件基本上一系列全都是推荐 3D Max。但是 3D max 属于较大的制作模型软件,如果对实施需求不高,可以尝试使用 ParaView 进行代替。甚至可以使用 Windows 中自带的 3D 查看器和画图 3D,但是后两者对你的 3D 模型的格式要求就有一些限制。

ParaView官网


画图 3D

3D 模型的导入

模型:stanford-bunny.fbx

分享两个模型:百度网盘

提取码:b33z


兔子模型也可以从 three 文件夹 example 中查找



代码:


<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<script src="../函数式编程/textbook/js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>		<script src="js/three.js"></script>		<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>		<script src="js/OBJLoader.js" type="text/javascript" charset="utf-8"></script>		<script src="js/FBXLoader.js" type="text/javascript" charset="utf-8"></script>		<script src="js/inflate.min.js" type="text/javascript" charset="utf-8"></script>
</head> <body> <div id="app">
</div> <script type="text/javascript"> var scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000); render = new THREE.WebGLRenderer(); render.setPixelRatio(window.devicePixelRatio); render.setSize(window.innerWidth, window.innerHeight) var app = document.getElementById("app"); app.appendChild(render.domElement); /********************************************************/ // 加载提示 var manager = new THREE.LoadingManager(); manager.onProgress = function(item, loaded, total){ console.log(item, loaded, total); }; 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){ console.error(xhr); }; var loader = new THREE.FBXLoader();//创建一个FBX加载器 var model, self = this ; loader.load("./modules/stanford-bunny.fbx", function(obj) { console.log(obj);//查看加载后返回的模型对象 obj.scale.multiplyScalar(0.0003); //缩小模型 self.model = obj; scene.add(self.model) animate(); }, onProgress, onError) // 光源 var point = new THREE.PointLight("white", 10, 100); point.position.set(40, 30, 30); scene.add(point); camera.position.set(20, 20, 30); // 坐标轴 var axisHelper = new THREE.AxisHelper(100); scene.add(axisHelper)
// 鼠标控件 var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象 /********************************************************/ function animate() { self.model.rotation.y += 0.03; controls.update(); render.render(scene, camera); window.requestAnimationFrame(animate); } </script> </body></html>
复制代码

效果:


发布于: 2021 年 03 月 22 日阅读数: 11
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文

评论

发布
暂无评论
Three.js杂记(六)——3D模型