Hugging Face's logo

Spaces:
MZhaovo
/
AI_TalkingFlower
Running

App Files Community
1
AI_TalkingFlower
File size: 3,472 Bytes 
f9e0ede
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

let scene, camera, renderer;
let bone_root, bone_skl_root, bone_body, bone_mouth, bone_mouth_1, bone_leaf_l, bone_leaf_r;

let clock = new THREE.Clock();

function init() {
    // 创建场景、相机和渲染器
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor(0x000000, 0); // 第二个参数0表示完全透明
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加光照
    const pointLight1 = new THREE.PointLight(0xffffff, 10, 100);
    pointLight1.position.set(1, 2, 2);
    scene.add(pointLight1);
    const pointLight2 = new THREE.PointLight(0xffffff, 10, 100);
    pointLight2.position.set(-1, 2, 2);
    scene.add(pointLight2);
    const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
    scene.add(directionalLight);

    // 加载模型
    const loader = new GLTFLoader();
    loader.load('TalkingFlower.gltf', function (gltf) {
        scene.add(gltf.scene);
        gltf.scene.traverse(function (object) {
            if (object.isBone) {
                console.log(object); // 打印出骨骼信息，帮助你找到需要的骨骼
                if (object.name === 'Root') bone_root = object;
                if (object.name === 'Skl_Root') bone_skl_root = object;
                if (object.name === 'Body') bone_body = object;
                if (object.name === 'Mouth') bone_mouth = object;
                if (object.name === 'Mouth_1') bone_mouth_1 = object;
                if (object.name === 'Leaf_L') bone_leaf_l = object;
                if (object.name === 'Leaf_R') bone_leaf_r = object;
            }
        });
    bone_leaf_r.position.z = -0.1;
    bone_leaf_l.position.z = -0.1;
    bone_leaf_r.position.x = -0.02;
    bone_leaf_l.position.x = 0.02;
    bone_mouth.position.y -= 0.05;
    bone_mouth.rotation.z -= 0.1;
    }, undefined, function (error) {
        console.error(error);
    });

    camera.position.z = 2;
    camera.position.y = 0.25;
}

// 设置动画相关变量
let frameCount = 0;
const totalFrames = 120; // 一个循环的总帧数

function animate() {
    requestAnimationFrame(animate);
    // 更新帧计数器
    frameCount++;
    // 每120帧重置帧计数器
    if (frameCount > totalFrames) {
        frameCount = 0;
    }

    // 获取经过的时间（秒）
    let elapsed = clock.getElapsedTime();

    // 设置动画周期（120 帧约等于 2 秒）
    let cycleDuration = 2;

    // 计算当前周期的相对时间
    let cycleTime = elapsed % cycleDuration;

    // 使用正弦函数计算位置和角度
    let theta = (cycleTime / cycleDuration) * Math.PI * 2;
    let mouth_position = Math.sin(theta) * 0.02;
    let mouth_angle = Math.cos(theta) * 0.1;
    let leaf_angle = Math.sin(theta * 4) * 0.05;

    // 应用变化到骨骼
    bone_mouth_1.scale.set(1, 0.8, 0.75);

    bone_mouth.position.x = mouth_position;
    bone_mouth.rotation.z = mouth_angle;

    bone_leaf_r.rotation.z = 9/8*Math.PI + leaf_angle;
    bone_leaf_l.rotation.z = 1/8*Math.PI + leaf_angle;

    renderer.render(scene, camera);
}


init();
animate();