ThingOrigin.js

案例展示 ​

绕着指定轴旋转(旋转角度/弧度)

关节：
旋转轴：
开始角度：
0
结束角度：
1.57
时间：
模式：
<template>
    <div style="position: relative">
        <div id="TO"></div>
        <el-form id="formRotate" label-width="80px">
            <el-form-item label="关节：">
                <el-select v-model="joint" size="small">
                    <el-option label="WS30-1" value="WS30-1"></el-option>
                    <el-option label="WS30-2" value="WS30-2"></el-option>
                    <el-option label="WS30-3" value="WS30-3"></el-option>
                    <el-option label="WS30-4" value="WS30-4"></el-option>
                    <el-option label="WS30-5" value="WS30-5"></el-option>
                    <el-option label="柱体" value="柱体"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="旋转轴：">
                <el-select v-model="axis" size="small">
                    <el-option label="x" value="x"></el-option>
                    <el-option label="y" value="y"></el-option>
                    <el-option label="z" value="z"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始角度：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="startAngle"
                        :min="0"
                        :max="3.14"
                        :step="0.05"
                        style="flex: 1; margin-right: 5px" />
                    <span class="angle-value">{{ startAngle }}</span>
                </div>
            </el-form-item>
            <el-form-item label="结束角度：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="endAngle"
                        :min="0"
                        :max="3.14"
                        :step="0.05"
                        style="flex: 1; margin-right: 5px" />
                    <span class="angle-value">{{ endAngle }}</span>
                </div>
            </el-form-item>
            <el-form-item label="时间：">
                <el-select v-model="duration" size="small">
                    <el-option label="500ms" :value="500"></el-option>
                    <el-option label="1000ms" :value="1000"></el-option>
                    <el-option label="1500ms" :value="1500"></el-option>
                    <el-option label="2000ms" :value="2000"></el-option>
                    <el-option label="3000ms" :value="3000"></el-option>
                    <el-option label="5000ms" :value="5000"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模式：">
                <el-select v-model="easing" size="small">
                    <el-option label="linear" value="linear"></el-option>
                    <el-option label="Quadratic.InOut" value="Quadratic.InOut"></el-option>
                    <el-option label="Quadratic.In" value="Quadratic.In"></el-option>
                    <el-option label="Quadratic.Out" value="Quadratic.Out"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="startTween()" size="small">执行</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElForm, ElFormItem, ElSelect, ElOption, ElSlider, ElButton } from 'element-plus'
let TO = null,
    originModel = null

const joint = ref('WS30-1')
const axis = ref('y')
const startAngle = ref(0)
const endAngle = ref(1.57)
const duration = ref(2000)
const easing = ref('linear')

onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            background: {
                type: 'sky' //天空盒
            }
        },
        camera: {
            //相机参数
            position: {
                x: -20,
                y: 100,
                z: 200
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })
    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-' + new Date().getTime(), //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403' //模型地址
            },
            modelType: 'gltf', //模型类型
            scale: {
                //缩放
                x: 2,
                y: 2,
                z: 2
            },
            position: {
                x: -30,
                y: 0,
                z: 0
            }
        })
        .then((model) => {
            originModel = model
            //添加到场景中
            TO.scene.add(originModel)
        })
})

//开始动画
function startTween() {
    if (!originModel) return

    //找到模型对象（使用originModel或通过名称查找）
    let rotateModel = TO.scene.getObjectByProperty('name', joint.value)
    //旋转
    TO.animate.rotateAxis(
        rotateModel,
        axis.value,
        startAngle.value,
        endAngle.value,
        duration.value,
        'rad',
        easing.value
    )
}
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}

#formRotate {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 260px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 12px;
}

.angle-value {
    min-width: 50px;
    text-align: right;
    font-size: 12px;
    color: #fff;
}

#formRotate :deep(.el-form-item__label) {
    color: #fff;
    font-size: 12px;
}
</style>

API 介绍 ​

animate.rotateAxis ​

方法签名返回值描述
rotateAxis(model: Object3D,axis: Vector3 | 'x' | 'y' | 'z',from: number,to: number,time: number,unit: 'rad' | 'deg' = 'rad',mode: string = 'linear')Tween<any>绕着指定轴旋转

参数说明：

参数名说明类型必填默认值
model模型Object3D是-
axis方向，可传入字符串 'x' | 'y' | 'z'string是-
from起始角度number是-
to目标角度number是-
time动画时间（单位：毫秒）number是-
unit单位stringrad
mode运动模式：linear（匀速）、bounceOut（弹开）string-linear