项目简介
- sandi-ui 是基于three 的vue3组件库,可以让你的用vue组件方式构建出3D世界。
- github 地址:github.com/MILIFIRE/sa… 可以给个小星星鼓励下吗
- 文档地址(科学上网):milifire.github.io/sandi-ui/
- 文档地址(非科学上网) http://152.136.110.22/ (网站还在备案,目前只能ip 访问 )
最终效果
创建场景
渲染器 务必设置设置宽高
<template>
<SDWebglRenderer :width="800" :height="400">
<SDScene>
<SDPerspectiveCamera/>
</SDScene>
</SDWebglRenderer>
</template>
效果
向场景里面添加一个三弟
使用 SDFBXLoader 加载 FBX 模型,我们使用 SDMeshBasicMaterial 指定 身体的材质 和模型基础的颜色为红,此时我们还看不到,我们需要将摄像机向后移动显示出我们的三弟
<template>
<SDWebglRenderer :width="800" :height="400">
<SDScene>
<SDPerspectiveCamera :positionZ="20" :positionY="6" />
<SDFBXLoader url="/fbx/Rumba Dancing.fbx">
<SDMeshBasicMaterial meshName="body1" :color="0xff0000" />
</SDFBXLoader>
</SDScene>
</SDWebglRenderer>
</template>
效果
给三弟穿上衣服
使用 SDTextureLoader 给材质 加载上贴图,三弟模型有两部分组成我们,用两个材质来分别去指定,使用meshName 属性让材质分别对应不同的模型。tip 我们去除了 SDMeshBasicMaterial color 属性 因为有贴图了
<template>
<SDWebglRenderer :width="800" :height="400">
<SDScene>
<SDPerspectiveCamera :positionZ="20" :positionY="6" />
<SDFBXLoader url="/fbx/Rumba Dancing.fbx">
<SDMeshBasicMaterial meshName="body1">
<SDTextureLoader url="/sandi-ui/img/zhangfei.jpg" type="map" />
</SDMeshBasicMaterial>
<SDMeshBasicMaterial meshName="face">
<SDTextureLoader url="/sandi-ui/img/face.png" type="map" />
</SDMeshBasicMaterial>
</SDFBXLoader>
</SDScene>
</SDWebglRenderer>
</template>
效果
让三弟动起来吧
这里 需要使用 SDAnimationMixer 动画混合器 和 SDAnimationAction 动作组件,来协作完成,悄悄告诉你可以同时播放多个动画哟,并且可以调整混入比例
<template>
<SDWebglRenderer :width="800" :height="400">
<SDScene>
<SDPerspectiveCamera :positionZ="20" :positionY="6" />
<SDFBXLoader url="/fbx/Rumba Dancing.fbx">
<SDMeshBasicMaterial meshName="body1">
<SDTextureLoader url="img/zhangfei.jpg" type="map" />
</SDMeshBasicMaterial>
<SDMeshBasicMaterial meshName="face">
<SDTextureLoader url="img/face.png" type="map" />
</SDMeshBasicMaterial>
<SDAnimationMixer>
<SDAnimationAction />
</SDAnimationMixer>
</SDFBXLoader>
</SDScene>
</SDWebglRenderer>
</template>
效果
代码和源文件地址
广交朋友 and 找工作
北京,今天下午,第三轮核酸,希望疫情早日过去。本人也在找 webgl 3D 相关的前端工程师工作,微信:S_wolfs。