Vue3用18行代码实现三弟跳舞

486 阅读1分钟

项目简介

最终效果

sandi.gif

创建场景

渲染器 务必设置设置宽高

<template>
    <SDWebglRenderer :width="800" :height="400">
        <SDScene>
            <SDPerspectiveCamera/>
        </SDScene>
    </SDWebglRenderer>
</template>

效果 image.png

向场景里面添加一个三弟

使用 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>

效果

image.png

给三弟穿上衣服

使用 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>

效果

image.png

让三弟动起来吧

这里 需要使用 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>

效果

sandi.gif

代码和源文件地址

github.com/MILIFIRE/sa…

广交朋友 and 找工作

北京,今天下午,第三轮核酸,希望疫情早日过去。本人也在找 webgl 3D 相关的前端工程师工作,微信:S_wolfs。