three实现三维卡通机器人跟随麦克风开口说话动作驱动同步代码-html代码-BFW代码库

three实现三维卡通机器人跟随麦克风开口说话动作驱动同步代码

代码语言：html

所属分类：三维

代码描述：three实现三维卡通机器人跟随麦克风开口说话动作驱动同步代码，打开麦克风按钮，你说啥，他嘴巴会同步开合。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Procedural Avatar - Bright Tech Environment</title>
    <style>
        /* 改为亮色背景 */
        body { margin: 0; overflow: hidden; background-color: #f0f5fa; font-family: sans-serif; }
        canvas { display: block; }
        #ui-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
        }
        button {
            background: #06b6d4;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            transition: background 0.3s, transform 0.1s;
            box-shadow: 0 4px 6px rgba(6, 182, 212, 0.2);
        }
        button:hover { background: #22d3ee; transform: translateY(-1px); }
        button:active { transform: translateY(0); }
        button:disabled { background: #94a3b8; cursor: default; box-shadow: none; }
    </style>
</head>
<body>

    <div id="ui-container">
        <button id="start-audio-btn">开启麦克风互动 (Enable Mic)</button>
    </div>

    <!-- Import Map -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://esm.sh/three@0.160.0",
                "three/addons/": "https://esm.sh/three@0.160.0/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // --- 1. Scene Setup (Bright Environment) ---
        const scene = new THREE.Scene();
        const bgColor = 0xf0f5fa; // 亮色科技蓝灰背景
        scene.background = new THREE.Color(bgColor);
        scene.fog = new THREE.Fog(bgColor, 8, 20); // 雾效，让底座边缘柔和融入背景

        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(0, 1.5, 5); // 稍微抬高相机视角

        const renderer = new THREE.WebGLRenderer({ antialias:.........完整代码请登录后点击上方下载按钮下载查看