I_loveCong的博客

three.js-master：为官网下载的代码包，包含所有需要用到的资源包，链接：https://github.com/mrdoob/three.js/archive/master.zip。模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb。路径：用到了Three.js提供的CatmullRomCurve3：使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。2、添加模型和播放动画。

岁月匆匆，又是一年毕业季，这次做个动态相册展示图片，放些有意思的内容，一起回忆下校园生活吧。

animationClip.findByName ( objectOrClipArray : Object, name : String ) : AnimationClip ——根据名称搜索动画剪辑(AnimationClip), 接收一个动画剪辑数组或者一个包含名为"animation"的数组的网格（或几何体）作为第一个参数。onLoad的参数将是一个包含有已加载部分的Object：.scene、 .scenes、 .cameras、 .animations 和 .asset。

模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb。用到了Three.js提供的CatmullRomCurve3：使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。为了方便操作我们将文件拷出来放在上图static\3dmod\gltf文件夹下，static与three.js-master同级。这里是添加了几个辅助对象，方便找到光照和场景坐标位置。这里我们直接导入模型，在。

加载器（GLTFLoader）为例进行模型导入操作，模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb。通过建模工具或者模型素材网站获取，学习用的话官网的模型也是可以使用的，在官方示例文件夹中有很多模型文件目录：three.js-master\examples\models。通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具。

使用构建工具与打包器的开发者更喜欢仅使用单独的包说明符（如’three’）而非相对路径，而examples/目录中的文件使用相对于 three.module.js 的引用并不符合这一期望。three.js的核心专注于3D引擎最重要的组件。这些组件和 three.js 的核心保持同步，而 npm 上类似的第三方包则由不同的作者进行维护，可能不是最新的。其一：在script标签中，默认不能使用module形式，不能使用import导入文件，我们需要在script标签上添加加 type=module 属性；

比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。

1.深入了解Three.js前提下需要知道：【OpenGL和WebGL】1. OpenGL是一个跨平台的3D/2D的绘图标准（规范）。OpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ，OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集，针对手机、游戏主机等嵌入式设备而设计。2. WebGL（Web Graphics Library）是一种3D绘图协议。