学习threejs,使用TWEEN插件实现动画

👨‍⚕️ 主页: gis分享者

👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • [1.1 ☘️THREE.PLYLoader PLY模型加载器](#1.1 ☘️THREE.PLYLoader PLY模型加载器)
    • [1.1 ☘️tween.js](#1.1 ☘️tween.js)
  • 二、🍀使用TWEEN插件实现动画
    • [1. ☘️实现思路](#1. ☘️实现思路)
    • [2. ☘️代码样例](#2. ☘️代码样例)

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用TWEEN插件实现动画,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.PLYLoader PLY模型加载器

THREE.PLYLoader 用于加载和处理多边形文件格式(.ply) 3D模型文件的扩展。
PLY三维文件:

PLY全名为多边形档案(Polygon File Format),是一种开放的三维模型文件格式,以文本或二进制方式存储。它十分灵活,可以包含多种几何体类型、颜色、法线等属性,并且可扩展、易于解析和处理,具有跨平台兼容性和数据压缩支持,被广泛应用于计算机图形学、计算机辅助设计和三维扫描等领域。

1.1 ☘️tween.js

**补间动画(Tween):**是一种在动画中插值的方法,它根据开始值和结束值之间的缓动函数(Easing Function)来计算中间值,并在一定的时间内逐渐将属性值从初始状态过渡到目标状态,从而实现平滑的过渡效果。

**tween.js:**是一种JavaScript动画库,它可以帮助您轻松创建补间动画。它提供了许多内置的缓动函数和灵活的API,可以很容易地控制动画的速度、延迟和重复次数等参数。tween.js还支持多个动画同时播放,您可以使用它来创建复杂的动画序列。

具体使用方法可以参考tween.js简介

二、🍀使用TWEEN插件实现动画

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源,初始化THREE.PointLight点光源,设置点光源位置,设置点光源投影,scene添加点光源。
  • 5、加载几何模型:创建THREE.AxesHelper坐标辅助工具,创建PLYLoader加载器,调用load方法,在load回调中获取geometry集合体对象,创建THREE.Mesh对象,参入geometry和材质对象,生成mesh模型物体,设置旋转、大小、位置。定义initTween方法,实现模型局部坐标localPosition位置改变的补间动画,执行动画。scene场景加入mesh和THREE.AxesHelper坐标辅助工具。
  • 6、加入controls控制,加入stats监控器,监控帧数信息。

2. ☘️代码样例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn47(使用TWEEN插件实现动画)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/js/tween.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/loaders/PLYLoader.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }

    canvas {
        display: block;
    }

</style>
<body onload="draw();">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setClearColor(0xffffff)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 0, 50)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
  }
  var light
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x444444))
    light = new THREE.PointLight(0xffffff)
    light.position.set(0, 50, 50)
    light.castShadow = true
    scene.add(light)
  }
  var initModel = () => {
    var helper = new THREE.AxesHelper(50)
    scene.add(helper)
    var loader = new THREE.PLYLoader()
    loader.load('data/model/ply/Lucy100k.ply', geometry => {
      geometry.computeVertexNormals()
      var material = new THREE.MeshStandardMaterial({color: 0x0055ff})
      var mesh = new THREE.Mesh(geometry, material)
      mesh.rotation.y = Math.PI
      mesh.scale.set(0.02, 0.02, 0.02)
      scene.add(mesh)

      // 保存一份默认的定点信息
      var position = geometry.getAttribute('position').array
      geometry.localPosition = []
      for (var i = 0; i < position.length; i++) {
        geometry.localPosition.push(position[i])
      }
      initTween(geometry)
    })
  }
  var tween
  var initTween = (geometry) => {
    var position = {y: 1}
    tween = new TWEEN.Tween(position).to({y: 0}, 5000)
    tween.easing(TWEEN.Easing.Sinusoidal.InOut)

    var tweenBack = new TWEEN.Tween(position).to({y: 1}, 5000)
    tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut)

    tween.chain(tweenBack)
    tweenBack.chain(tween)
    var count = geometry.getAttribute("position").count

    //获取一下模型的最矮处
    geometry.computeBoundingBox()
    var minY = geometry.boundingBox.min.y

    var onUpdate = function () {
      var y = this.y

      var arr = []
      for (var i = 0; i < count; i++) {
        arr.push(geometry.localPosition[i * 3])
        arr.push((geometry.localPosition[i * 3 + 1]-minY) * y)
        arr.push(geometry.localPosition[i * 3 + 2])
      }

      geometry.getAttribute("position").array = new Float32Array(arr)

      geometry.getAttribute("position").needsUpdate = true

    }

    tween.onUpdate(onUpdate)
    tweenBack.onUpdate(onUpdate)

    tween.start()
  }
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
  }
  var render = () => {
    TWEEN.update()
    renderer.render(scene, camera)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initStats()
    initControls()

    animate()
    window.onresize = onWindowResize
  }
</script>
</html>

效果如下:

相关推荐
gis分享者20 小时前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight
gis分享者5 天前
学习threejs,使用HemisphereLight半球光
threejs·hemispherelight·半球光
gis分享者9 天前
学习threejs,使用Lensflare模拟镜头眩光
threejs·lensflare·眩光
gis分享者12 天前
学习threejs,tga格式图片文件贴图
threejs·贴图·tga·tgaloader
gis分享者13 天前
学习threejs,pvr格式图片文件贴图
threejs·贴图·pvr
gis分享者1 个月前
学习threejs,使用OrbitControls相机控制器
threejs·相机·相机控制器·orbitcontrols
不系舟1781 个月前
threejs 实现镜面反射,只反射指定物体,背景透明
threejs
gis分享者1 个月前
学习threejs,使用RollControls相机控制器
threejs·相机控制器·rollcontrols
gis分享者1 个月前
学习threejs,使用FlyControls相机控制器
threejs·相机控制器·flycontrols
gis分享者1 个月前
学习threejs,使用TrackballControls相机控制器
threejs·trackball·相机控制器