ThreeJS模型加载动画——从下向上加载

本文介绍了使用ThreeJS实现从下向上动态加载模型的动画效果。通过压扁模型,设置点的位置并逐步恢复它们的原始高度,达到模型渐进显示的目的。在渲染过程中,每帧调整点的高度,直至恢复原始高度完成加载动画。
摘要由CSDN通过智能技术生成

        从下向上动态加载模型,模型本身是由点-线-面组成,setDynamic动态控制模型每个point的位置,让模型出现一个动态加载的效果,如下图:

        1、首先将模型压扁,获取point的position位置,然后设置y轴的高度为0,并将原始高度记录到modelPositons用于后面还原高度。

//将物体压扁,用于升起
var _temp = objGeo.children[0];
_temp.geometry.attributes.position.setDynamic(true);
let positions = combineBuffer(_temp, 'position');
modelPositons = positions.clone();
var maxIndex = 0;//最大值
for (var i = positions.count - 1; i > 0; i--) {
    var px = positions.getX(i);
    var py = positions.getY(i);
    var pz = positions.getZ(i);
    //计算得出最高点,用于停止动画
    if ( py > 0 ) {
        positions.setXYZ(
                i,
                px ,
                0,
                pz
        );

    }
}
_temp.geometry.attribu
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Three.js 中加载动画模型,需要使用以下步骤: 1. 导入 Three.js 库和其他必要的库文件。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script> ``` 2. 创建场景、相机和渲染器。 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 3. 加载模型动画数据。 ```javascript var loader = new THREE.GLTFLoader(); loader.load('model.gltf', function (gltf) { scene.add(gltf.scene); mixer = new THREE.AnimationMixer(gltf.scene); gltf.animations.forEach((clip) => { mixer.clipAction(clip).play(); }); }); ``` 4. 在动画循环中更新动画状态。 ```javascript function animate() { requestAnimationFrame(animate); if (mixer) { mixer.update(clock.getDelta()); } renderer.render(scene, camera); } animate(); ``` 在上述代码中,`model.gltf` 是包含模型动画数据的 GLTF 文件路径。加载完成后,将模型添加到场景中,并为每个动画剪辑创建一个 `THREE.AnimationAction` 实例。然后,在动画循环中,使用 `THREE.AnimationMixer` 更新动画状态,并使用渲染器渲染场景。 注意:在加载模型动画数据之前,你可能需要使用 Blender 或其他 3D 建模工具来创建和导出 GLTF 文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牟云飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值