VUE+Three.js 实现前端窗帘动画烘培效果

一枚程序圆
660 阅读2分钟

VUE 动画baking 效果，下文会介绍实现过程中遇到的一些问题和初步结果

在Blender中新建一个空项目，插入一个平面，因为在pad上运行，细分50左右即可，把平面它折叠成如下波浪形状，添加sharpKey和关键帧使其可以动画。

c01.PNG

创建窗帘材质，光滑度、透明低一点，模拟布料的感觉

c02.PNG

为窗帘设置基本diffusion材质，窗帘的材质后期编程时候会动态绑定，这里只需要测试一下

c03.PNG

材料选择Silk 创建布料动力学 关键设定如下 Quality：5 Self Collisions :Distance : 0.005， 其他保持不变

c04.PNG

删除灯光和摄像机等其它物体，记住此时导出物体gltf是没有粒子效果的，需要使用动画烘培功能，blender的动画更能在默认的界面中找不到，需要使用一个官方的LightWave Point Cache 插件导出成mdd格式，导出后再导出到gltf还是没有任何效果，我晕why,查了下gltf源码才知道有两个方法，一用three.js 的mdd loader 来加载mdd文件，二暴力的方法，再把前面生成mdd文件导入到blender中，再看动画关键帧上的变化，说明关键帧动画成功加载了

c07.PNG

再通过gltf导出，记住把Sharp Keys 选上

image.png

在Vue中插入一个three对象，把Three.js环境设置好，新版本的three.js中gltf loader已经被纳入核心，可以直接使用gltfLoader，注意版本问题

gltf加载代码如下

const gltfLoader = new GLTFLoader()
gltfLoader.load('/static/model/ccbc.gltf', (gltf) => {

    gltf.scene.traverse(function(child){
    if(child.isMesh){
	child.material.emissive = child.material.color;
	child.material.emissiveMap = child.material.map;
    }
});

var model = gltf.scene;
scene.add(model);

//animation
mixer = new THREE.AnimationMixer(model);
mixer.clipAction(gltf.animations[0]).play();

//orbitControls
const controls = new OrbitControls(camera,document.getElementById("canvas_three"));
controls.enableDamping = true;
controls.enableZoom = true;
controls.antoRotate = true;
controls.minDistance = 20;
controls.maxDistance = 400;

渲染代码如下

const anim_speed = 10;

function animation() {
    var delta = clock.getDelta();
    if(mixer!= null){
        renderer.render(scene, camera);
        mixer.update(clock.getDelta()*anim_speed);
    }
}

cf7.PNG 动态布料物体的动画烘培效果,同理可以制作旗帜、毛发、柔体动画效果 ，3d组件当然也可直接用regl写

  • Three.js， Three.js 3d组件。
  • regl，解决了 WebGL 的状态管理难题，提供了命令和资源的封装，很多 WebGL 应用都可以在此基础上开发target=https%3A//github.com/wwwtyro/vixel) 。
  • orbitControls，一个旋转视角库教程。
  • PWA 特性，使用 Service Worker 预缓存环境贴图。
  • Blender目前最好的开源3d环境
avatar
文章
阅读
粉丝