推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 模型或标签淡入淡出 如果你想实现一个模型或标签的淡入淡出效果，可以同过tweenjs控制模型或标签的透明度轻松实现。 Tweenjs回调函数 twwenjs库提供了onStart、onUpdate、onComplete等用于控制动画执行的回调函数。 * onStart：动画开始执行触发 * onUpdate：动画执行过程中，一直被调用执行 * onComplete：动画正常执行完触发 .onUpdate(function(obj){})结构中，obj对应的是new TWEEN.Tween(pos)的参数对象pos。 const tween = new TWEEN.Tween(pos).to({x: 0}, 4000) // 开始执行：动画片段tween开始执行的时候触发onStart .onStart(function(obj){ ... }) 模型淡入 // 模型淡入 material.transparent = true;//开启透明计算 material.opaci

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 缓动算法.easing(地球渐入相机动画) 动画片段tween通过.easing()方法可以设置缓动算法，在一些动画场景中你设置合理的缓动算法，可以让动画看起来非常自然，比如一辆车从静止进入匀速状态，动画最好有一个加速过程的过渡，对于这个加速的方式就可以通过缓动算法实现。 形象理解：所谓缓动，你可以理解为运动缓缓加速的过程，缓动算法就是运动加速的算法，推广一下，不一定针对运动，比如颜色渐变、相机动画也可以类比车辆运动加减速。 缓动算法.easing案例体验 你可以对比课件案例源码地球相机动画设置和不设置缓动的视觉差异，你会发现设置缓动函数后，视觉效果更加舒适和自然。 camera.position.set(3000, 3000, 3000); camera.lookAt(0, 0, 0); // 视觉效果：地球从小到大出现(透视投影相机远小近大投影规律) new TWEEN.Tween(camera.position) .to({x: 300,

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相机靠近放大预览 本节课内容，其实和上节课的“3.点按钮,相机飞行靠近观察设备”基本相似，你可以当做练习题。 具体交互效果就是鼠标点击选中某个设备，相机靠近该设备，特别关注，设备在屏幕上呈现放大显示的效果。 下面在前面课程射线拾取模型弹出标签 (opens new window)的代码基础上给大家讲解。演示文件已经提前引入tweenjs动画库和上节课封装的相机动画代码。 点击选中设备，相机飞行靠近 chooseObj是鼠标单机射线拾取的模型对象,你可以获取该模型对象世界坐标对应的某个空对象位置，生成相机动画。 chooseObj是鼠标单机射线拾取的模型对象,你可以获取该模型对象世界坐标，生成相机动画。不过有一点要注意在Blender中，你要设置好选中设备的局部坐标系，确保局部坐标系，在设备上某个位置，比如居中，比如顶部，根据需要自定义设置，不过不要偏差太大，比如设备的局部坐标系与设备本身距离很远。 const pos = new THREE.Vector3(); chooseObj.g

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相机飞行靠近观察设备 继续上节课相机动画的讲解。 实际开发的的时候，一个较大的三维场景，有很多不同的设备或物品，你可能希望通过UI按钮点击切换到不同视角，观察某个区域，或者说放大观察某个特定的物品或设备。 按钮 切换相机位置和视角的按钮 点击按钮A，相机运动到设备A附近 点击按钮A，相机运动到工厂中设备A附近，同时把相机观察目标，逐渐切换到设备A import TWEEN f

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 tweenjs相机运动动画 下面给大家讲解如何通过tweenjs实现threejs相机动画，具体说就是使用tweenjs改变相机的位置camera.position和视线方向。 相机飞行动画(从一个点飞到另一个点) 引入tweenjs，并在requestAnimationFrame动画中执行TWEEN.update();更新。 import TWEEN from '@tweenjs/tween.js'; // 渲染循环 function render() { TWEEN.update(); renderer.render(scene, camera); requestAnimationFrame(render); } render(); 相机动画:从一个点移动到另一个点 camera.position.set(202, 123, 125); new TWEEN.Tween(camera.position) .to({x: 202,y:

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 tweenjs创建threejs动画 TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。 如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。 * github地址：https://github.com/tweenjs/tween.js/ * npm地址：https://www.npmjs.com/package/@tweenjs/tween.js * 官网：https://createjs.com/tweenjs npm安装 在工程化开发的时候可以通过npm命令行安装tween.js模块。 npm i @tweenjs/tween.js@^18 import TWEEN from '@tweenjs/tween.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 骨骼动画不同动作切换 Three.js实际开发时候，有时候需要需要切换不同动作的动画。比如一个人从休息状态切换为跑步状态，从走路状态切换为休息状态。 查看人骨骼动画几组动画数据 课件中gltf模型gltf.animations包含四个关键帧动画对象AnimationClip，分别对应休息、跑步等动作。 console.log('控制台查看gltf对象结构', gltf); // gltf.animations[0] Idle 休息 // gltf.animations[1] Run 跑步 // gltf.animations[2] TPose T形静止展开 // gltf.animations[3] Walk 走路 const mixer = new THREE.AnimationMixer(gltf.scene); const clipAction = mixer.clipAction(

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 查看外部模型骨骼动画 实际开发一般在三维建模软件中编辑骨骼动画，对于threejs而言，你只需要掌握如何通过代码获取你想要的骨骼信息即可。 下面给大家演示，加载一个外部骨骼动画模型，查看骨骼结构，并播放动画。 骨骼动画创建 实际开发时候，比如一个人物角色模型你想实现走路、奔跑等动作，一般需要美术通过三维建模软件骨骼动画功能实现。简单说就是模型表面顶点数据跟着虚拟的骨骼关节Bone发生变化，比如一个骨骼关节Bone转动，附近的皮肤(模型顶点)跟着旋转变形。 最后用关键帧动画控制骨骼关节运动，带动身体皮肤变形，就可以生成骨骼动画。 可视化外部模型骨骼关节 把加载的模型gltf.scene作为THREE.SkeletonHelper()参数，添加到场景中,就可以可视化gltf.scene里面骨骼网格模型包含的骨骼关节。 const loader = new GLTFLoader(); loader.load("../骨骼动画.glb", function (gltf) { co

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 骨骼关节Bone 骨骼关节Bone是threejs的一个类，你可以类似人或动物的骨骼关节，来理解骨骼关节Bone对象。 骨骼关节Bone的作用就是模拟人或动物的关节运动，控制身体表面变形，来生成骨骼动画(可以查看下节课的案例)。 骨骼关节Bone的父类是Object3D,自然会继承Object3D相关的属性或方法，比如位置属性position、旋转方法rotateX()、添加方法add()... 骨骼关节Bone树结构 人或动物实际的骨骼关节结构往往是比较复杂的，一般可以用一个层级树结构表达。 你可以把骨骼关节当做一个模型对象Object3D，构建一个简单的层级模型。 const Bone1 = new THREE.Bone(); //关节1，用来作为根关节 const Bone2 = new THREE.Bone(); //关节2 const Bone3 = new THREE.Bone(); //关节3 // 设置关节父子关系 多个骨头关节构成一个树结构 Bone1.add(

在线工具推荐：三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 -  3D模型预览图生成服务 变形动画原理 下面给大家介绍下变形动画的基本原理。 .morphAttributes设置几何体变形目标顶点数据 BufferGeometry属性.morphAttributes的功能就是用来设置几何体变形目标顶点数据。 //几何体两组顶点一一对应，位置不同，然后通过权重系数，可以控制模型形状在两组顶点之间变化 const geometry = new THREE.BoxGeometry(50, 50, 50); // 为geometry提供变形目标的顶点数据(注意和原始geometry顶点数量一致) const target1 = new THREE.BoxGeometry(50, 200, 50).attributes.position;//变高 const target2 = new THREE.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 虚拟装配(任意时间定位) 继续上节课关于虚拟装配动画的讲解，增加一个拖动条，用来查看任意时间模型动画状态。 关于关键帧动画，通过拖动条查看动画任意时间状态的方法，前面16.3小节讲解过，可以直接参考。 属性.duration获取动画默认的执行时间 如果你不知道关键帧动画的执行时间，可以通过加载模型返回对象AnimationClip的.duration属性获得。 const clip = gltf.animations[0]; const duration = clip.duration;//默认持续时间 拖动条查看任意时间动画状态 import {GUI} from 'three/addons/libs/lil-gui.module.min.js'; const gui = new GUI(); //创建GUI对象 clipAction.paused = true;//暂停状态拖动拖动条 // 拖动条查看动画任何时刻模型状态

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 机械虚拟装配案例(播放) 如果你想做一个产品、机械、建筑的虚拟装配动画，可以美术先在建模软件中生成关键帧动画的数据，然后通过threejs加载模型，播放动画数据即可。 本节课用到的threejs知识点在前面几小节基本都详细说明过，你可以先尝试自己能否实现，再听课。 动画不循环播放 该案例动画是一个虚拟装配的动画，如果你不需要循环播放，可以关闭掉。 const clipAction = mixer.clipAction(clip); //不循环播放 clipAction.loop = THREE.LoopOnce; 动画开始设置暂停 执行.play()动画默认播放，在按钮控制播放暂停之前，可以先设置.paused = true动画预先暂停。 const clipAction = mixer.clipAction(clip); //创建动画clipAction对象 clipAction.play(); //播放动画 clipAction.paused = true; //暂停状态

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 解析外部模型关键帧动画 前面几节课，用到的关键帧动画，是借助threejs提供的两个类KeyframeTrack、AnimationClip自己写代码实现。不过实际开发的时候，很多时候会用三维建模软件，比如Blender，生成关键帧动画，导出包含动画的模型文件，加载模型后,你只需要播放关键帧动画，而不用手写代码创建关键帧动画。 下面就给大家讲解，如果加载解析外部模型文件中的关键帧动画数据。 课件源码中提供了一个美术用Blender编辑好的关键帧动画模型文件，你可以查看预览。 关键帧动画模型的父对象作为播放器AnimationMixer参数 前面讲解过，如果你想播放一个模型的关键帧动画，需要把模型作为播放器AnimationMixer的参数。 //包含关键帧动画的模型对象作为AnimationMixer的参数创建一个播放器mixer const mixer = new THREE.AnimationMixer(mesh); 即便你把mesh的父对象group作为播放器Animation

在线工具推荐：3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 动画播放（拖动任意时间状态） 如果你想了解，关键帧动画在特定时间段播放，或者把动画定位在时间轴上任何一个时刻，或者借助UI拖动条，拖动查看关键帧任何时刻的状态，可以学习本节课。 控制动画播放特定时间段 AnimationClip参数2设置为6，执行AnimationAction.play(),默认播放0~6秒之间的关键帧动画。AnimationClip参数2的值会作为自身.duration属性的值。 const clip = new THREE.AnimationClip("test", 6, [posKF, colorKF]); console.log('clip.duration',clip.duration); 从时间轴上选择时间段播放动画，开始时刻AnimationAction.time，

在线工具推荐：Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器 动画播放（暂停、倍速、循环） 上节课对关键帧动画如何创建，如何播放，做了整体介绍，下面进一步介绍关键帧动画播放的知识，比如关键帧动画停止播放、暂停播放、倍速播放... 动画动作对象AnimationAction 查看文档你可以知道，执行播放器AnimationMixer的.clipAction()方法会返回一个AnimationAction对象。 //AnimationMixer的`.clipAction()`返回一个AnimationAction对象 const clipAction = mixer.clipAction(clip); AnimationAction对象的功能就是用来控制如何播放关键帧动画，比如是否播放、几倍速播放、是否循环播放、是否暂停播放... 你可以测试注释代码clipAction.play();，看看关键帧动画是否变化。 //.play()控制动画播放 clipAction.pla

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 关键帧动画 打开课件案例源码，你可以看到物体从一个位置移动到另一个位置的动画效果，移动过程中也出现过颜色变化。 课件源码效果具体描述，就是0~3秒物体逐渐从坐标原点移动端x轴100位置，然后3~6秒物体逐渐从x轴100移动到z轴100位置，同时2~5秒时间内，把物体从红色逐渐改变为蓝色。 关键帧动画解释 所谓关键帧动画，你可以理解为在时间轴上，选择几个关键的时间点，然后分别定义这几个时间点对应物体状态(比如位置、姿态、颜色等)，然后基于几个关键的时间——状态数据，生成连续的动画。 课件源码位置关键帧数据(时间——状态) * 0秒：坐标原点 * 3秒：x轴上100坐标 * 6秒：z轴上100坐标 课件源码颜色关键帧数据(时间——状态) * 2秒：红色 * 5秒：蓝色 1. 创建关键帧动画AnimationClip * 1.1 给需要设置关键帧动画的模型命名 * 1.2

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Sprite标签(Canvas作为贴图) 上节课案例创建标签的方式，是把一张图片作为Sprite精灵模型的颜色贴图,本节给大家演示把Canvas画布作为Sprite精灵模型的颜色贴图，实现一个标签。 注意：本节课主要是技术方案讲解，默认你有Canvas基础，如果没有Canvas基础，可以学习之后再来学习本节课内容。 Canvas画布绘制一个标签 你可以使用Canvas绘制特定轮廓的标签，比如加上指引线或箭头，可以输入特定文字。 下面代码自动适配了不同长度的文字标注，文字符号越多，canvas画布越长。 // 生成一个canvas对象，标注文字为参数name function createCanvas(name) { /** * 创建一个canvas对象，绘制几何图案或添加文字 */ const canvas = document.createElement("canvas"); const arr = name.split(""); //分割为

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 CSS3DRenderer渲染HTML标签 CSS3渲染器CSS3DRenderer和CSS2渲染器CSS2DRenderer整体使用流程基本相同，只是在HTML标签渲染效果方面不同，比如CSS3渲染的标签会跟着场景相机同步缩放，而CSS2渲染的标签默认保持自身像素值。 下面就在CSS2渲染器代码基础上给大家讲解。 设置CSS3渲染器代码 和CSS2渲染器代码一样设置，只需要把CSS2换成CSS3即可。 // 引入CSS3渲染器CSS3DRenderer import {CSS3DRenderer} from 'three/addons/renderers/CSS3DRenderer.js'; // 创建一个CSS3渲染器CSS3DRenderer const css3Renderer = new CSS2DRenderer(); css2Renderer.setSize(width, height); // HTML标签外面父元素叠加到canv