建搜索型网站,html自学怎么入门,孩子发烧反反复复不退烧怎么办,wordpress文章页实现图片幻灯展现之前有说过两种创建动画的形式#xff0c;一个是很粗的方式#xff0c;直接在requestAnimationFrame中修改模型的属性#xff0c;因为threejs本身就会不断刷新画面#xff0c;利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性#xff0c;另一种方式是… 之前有说过两种创建动画的形式一个是很粗的方式直接在requestAnimationFrame中修改模型的属性因为threejs本身就会不断刷新画面利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性另一种方式是用tweenJs这个使用起来简单但是缺点要另外引入tweenjs才可以使用还有一种是threejs自带的动画实现效果叫关键帧动画这节补上。 了解关键帧动画之前要了解其中几个重要的概念
KeyframeTrack 关键帧轨道
关键帧轨道用来制作一组动画用来在这组动画中动态修改模型某一个属性的值最终形成动画比如可以修改模型的位置修改模型的材质颜色等KeyframeTack的入参如下
KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )
name - 关键帧轨道(KeyframeTrack)的标识符 times - 关键帧的时间数组, 被内部转化为 Float32Array values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array interpolation - 使用的插值类型 同时threejs提供多种KeyFrameTrack的子类来展示各种不用的属性值改变包括 VectorKeyframeTrack:向量类型的关键帧轨道ColorKeyframeTrack:反应颜色变化的关键帧轨道 BooleanKeyframeTrack:布尔类型的关键帧轨道NumberKeyframeTrack:数字类型的关键帧轨道QuaternionKeyframeTrack:四元数类型的关键帧轨道StringKeyframeTrack:字符串类型的关键帧轨道。
AnimationClip 动画剪辑
动画剪辑AnimationClip是一个可重用的关键帧轨道集它用来定义动画它的入参如下
AnimationClip( name : String, duration : Number, tracks : Array ) name - 此剪辑的名称 duration - 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。 tracks - 一个由关键帧轨道KeyframeTracks组成的数组。AnimationClip里面每个动画属性的数据都存储在一个单独的KeyframeTrack中。
Animation Mixer 动画混合器
动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时每个对象都可以使用同一个动画混合器它的入参如下AnimationMixer( rootObject : Object3D ) rootObject - 混合器播放的动画所属的对象。
AnimationAction 动画动作
AnimationActions 用来调控制存储在AnimationClips中的动画。通过配置AnimationAction我们可以决定何时播放、暂停或停止其中一个混合器中的某个AnimationClip 这个AnimationClip是否需要重复播放以及重复的频率 是否需要使用淡入淡出或时间缩放以及一些其他内容。它的入参如下AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D )
mixer - 被此动作控制的 动画混合器 clip - 动画剪辑 保存了此动作当中的动画数据 localRoot - 动作执行的根对象
下面放完整代码可以直接复制到html中运行不过记得添加上两个js文件
!DOCTYPE html
htmlhead includeDefaulttruemeta nameviewport contentwidthdevice-width, user-scalableno, minimum-scale1.0, maximum-scale1.0meta http-equivContent-Type contenttext/html;charsetutf-8 /title位置移动/titlescript src./ThreeJs/js/three.js/scriptscript src./ThreeJs/js/OrbitControls.js/script
/headbodydiv classtext/divdiv idcontainer/divscriptvar camera, scene, renderer, controls;var mixer;init();// 初始化场景function initScene() {scene new THREE.Scene();scene.background new THREE.Color( 0xf0f0f0 );scene.fog new THREE.Fog(scene.background, 3000, 5000);}// 初始化相机function initCamera() {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(150, 150, 150);camera.lookAt(new THREE.Vector3(0, 0, 0));}// 初始化灯光function initLight() {var directionalLight new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源directionalLight.color.setHSL(0.1, 1, 0.95);directionalLight.position.set(0, 200, 0).normalize();scene.add(directionalLight);var ambient new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源ambient.position.set(0, 0, 0);scene.add(ambient);}//创建模型以及实现动画效果function initCube(){clock new THREE.Clock();cubeGeo new THREE.BoxBufferGeometry( 50, 50, 50 );cubeMaterial new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( ./ThreeJs/images/box.png ) } );var mesh new THREE.Mesh( cubeGeo, cubeMaterial );;scene.add( mesh );mesh.name Box;//创建时间轴并配置第一个动画效果改变模型位置const times [0, 3, 6]; //时间轴上设置三个时刻0、3、6秒const values [0, 0, 0, 100, 0, 0, 0, 100, 100];// times中三个不同时间点物体分别对应values中的三个xyz坐标const posKF new THREE.KeyframeTrack(Box.position, times, values);// 0~3秒物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)//创建第二个动画效果改变模型角度const xAxis new THREE.Vector3(1,0,0) //三维向量沿x轴const qInitial new THREE.Quaternion().setFromAxisAngle(xAxis,0)//起点角度const qFinal new THREE.Quaternion().setFromAxisAngle(xAxis,Math.PI)//终点角度const rotateValues [ qInitial.x,qInitial.y,qInitial.z,qInitial.w, qFinal.x,qFinal.y,qFinal.z,qFinal.w,qInitial.x,qInitial.y,qInitial.z,qInitial.w];//设置三个关键帧的角度const rotateKF new THREE.QuaternionKeyframeTrack(Box.quaternion, times, rotateValues);//创建第三个动画效果设置模型颜色const colorValues [1, 0, 0, 0, 0, 1, 0, 1, 1];// times中三个不同时间点分别设置三种不同的颜色const colorKF new THREE.KeyframeTrack(Box.material.color, times, colorValues);// 0~3秒颜色从[1,0,0]到[0,0,1]最后到[0,1,1]//将三个动画效果添加到AnimationClip中名字持续时间与时间轴对应动画组const clip new THREE.AnimationClip(test, 6, [posKF, rotateKF, colorKF]);//创建动画混合器mixer new THREE.AnimationMixer(mesh);// 剪辑clip作为参数通过混合器clipAction方法返回一个操作对象AnimationActionvar AnimationAction mixer.clipAction(clip);//通过操作Action设置播放方式AnimationAction.timeScale 1;//默认1可以调节播放速度// AnimationAction.loop THREE.LoopOnce; //不循环播放AnimationAction.play();//开始播放}// 初始化渲染器function initRenderer() {renderer new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x4682B4, 1.0);document.body.appendChild(renderer.domElement);}// 初始化轨迹球控件function initControls() {controls new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping true;controls.dampingFactor 0.5;// 视角最小距离controls.minDistance 100;// 视角最远距离controls.maxDistance 5000;// 最大角度controls.maxPolarAngle Math.PI / 2.2;}//加载初始化function init() {initScene();initCamera();initLight();initCube();initRenderer();initControls();render();}function onWindowResize() {camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function render() {renderer.render(scene, camera); //执行渲染操作mixer.update(0.0166666666);//这里给动画设置更新速度因为默认是一秒钟渲染60次所以这里设置为1/60的值requestAnimationFrame(render); //请求再次执行渲染函数render渲染下一帧 }// 更新控件function update() {controls.update();}/script
/body/html实现的效果如下 关键帧动画视频
