WebGL three.js学习笔记加载外部模型以及Tween.js动画

最新推荐文章于 2024-06-04 21:10:06 发布

weixin_30322405

最新推荐文章于 2024-06-04 21:10:06 发布

阅读量453

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/nsytsqdtn/p/10850548.html

版权

本文介绍了如何使用WebGL库three.js加载STL格式的外部3D模型，并结合Tween.js实现动画效果。通过加载模型、转换BufferGeometry为Geometry、创建粒子系统以及配置Tween.js动画，详细阐述了加载模型和实现动画的完整过程。

摘要由CSDN通过智能技术生成

WebGL three.js学习笔记加载外部模型以及Tween.js动画

本文的程序实现了加载外部stl格式的模型，以及学习了如何把加载的模型变为一个粒子系统，并使用Tween.js对该粒子系统进行动画设置

模型动画demo演示(网页加载速度可能会比较慢)

demo地址：https://nsytsqdtn.github.io/demo/naval_craft/naval_craft

demo截图如下：
naval_craft

naval_craft

原模型截图：

在我们写three.js的网页的时候，大多时候并不需要我们去手动建立模型，一些复杂的模型都是通过建模软件去完成，所以在这里去学习如何去将外部的模型加载到我们的网页中来。

three.js支持导入的模型有很多，包括我们常见的OBJ、FBX、STL、PLY、JSON等等格式，在这个程序中，我选择了使用STL模型来进行学习。

.stl 文件是在计算机图形应用系统中，用于表示三角形网格的一种文件格式，常用于3d打印技术使用，因为STL格式的文件在网上可以免费不用注册的下载，比较方便。这里推荐一个还不错的网站，http://www.3dhoo.com/model ，里面有很多免费直接下载STL格式的模型。

加载外部模型

在three.js中，我们要加载外部模型，就需要引入相应的js文件。比如我需要引入STL格式的文件，我就引入“three.js\examples\js\loaders\STLLoader.js”，其他格式的js文件在loaders文件夹也都能找到，如果是three.js没有支持导入的模型格式，就需要自己写一个加载器，网上也有许多的教程。

引入相应js文件以后，我们首先要做的事创建一个加载器。

let loader = new THREE.STLLoader();//创建stl的加载器，用加载器来加载stl模型

我们要使用该加载器加载模型，就需要调用loader .load(filename,onSuccess(bufferGeometry),onProgress(xhr),onError(error))这个方法
其中：
filename是模型的路径
onSuccess(bufferGeometry)是加载成功后回调处理(参数为生成的模型的几何体)，

注意：这里的几何体不是我们常用的geometry，而是bufferGeometry，它和geometry还是有一些的区别，但是也都可以作为THREE.Mesh（）的第一个参数穿进去。具体可以进行百度。

onProgress(xhr)是加载过程中回调处理(xhr对象属性可计算出已完成加载百分比)
onError(error)是失败回调处理方法
一般我们只需要使用前两个参数就可以完成工作。

let loader = new THREE.STLLoader();//创建stl的加载器，用加载器来加载stl模型
let loader.load("../../../asset/ship.stl", function (bufferGeometry) {//加载模型的方法，
//第一个参数是模型的路径，第二个参数时候我们定义的回调函数，一旦模型加载成功，回调函数就会被调用
let material = new THREE.MeshBasicMaterial();
let mesh = new THREE.Mesh(bufferGeometry,material);
scene.add(mesh);
}

一般只需要这样写回调函数，模型就可以成功加载。
但我在这里想根据该模型去创建一个粒子系统，像本文开头的那样，所以我们需要改一下代码。

        let loader = new THREE.STLLoader();//创建stl的加载器，用加载器来加载stl模型
        group = new THREE.Object3D();
        loader.load("../../../asset/ship.stl", function (buf