three.js —— 引入模型


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="importmap">
        {
        "imports": {
            "three": "./node_modules/three/build/three.module.js",
            "three/examples/jsm/": "./node_modules/three/examples/jsm/"
        }
    }
</script>
<script type="module">     
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

//  创建基础场景
// 创建场景
const scene = new THREE.Scene();

// 设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加环境光
// const ambientLight = new THREE.AmbientLight(0x404040); // 轻微的灰色
// scene.add(ambientLight);

// 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);



// 初始化加载器
const loader = new GLTFLoader();

// 加载模型
loader.load(
    './assets/materials/scifi_girl_v.01.glb', 
    // './assets/materials/scene.gltf' ,// 模型路径
    (gltf) => {
        // 当模型加载完成后，将其添加到场景中
        const model = gltf.scene;
        scene.add(model);

         // 将模型保存到全局变量
        window.model = model;

        // 可选：调整模型的位置、旋转或缩放
        model.position.set(0, -1, 0);
        model.rotation.y = Math.PI / 4;  // 旋转45度
        // model.scale.set(0.5, 0.5, 0.5);  // 缩小一半
         model.scale.set(1,1, 1); 

        // 添加动画支持
        const animations = gltf.animations;  // 获取模型动画数据
        if (animations && animations.length > 0) {
            const mixer = new THREE.AnimationMixer(model);  // 创建动画混合器
            const action = mixer.clipAction(animations[0]);  // 播放第一个动画
            action.play();
            
            // 将mixer存储到全局变量中供animate函数使用
            window.modelMixer = mixer;
        }
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.error('An error happened', error);
    }
);

//   const cube = new THREE.Mesh(geometry, material);
        // 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
        // scene.add(cube);
// 渲染循环

const clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);

    // 更新动画
    const delta = clock.getDelta();  // 获取时间差
    if (window.modelMixer) {
        window.modelMixer.update(delta);  // 更新模型动画
    }

       // 让模型绕X轴和Y轴旋转
    if (typeof window.model !== 'undefined') {
        // window.model.rotation.x += 0.01;
        // window.model.rotation.y += 0.01; //Y轴逆时针旋转
        window.model.rotation.y -= 0.01;  //顺时针旋转
    }
    renderer.render(scene, camera);
}

animate();

</script>
</body>
</html>

模型素材地址：
https://sketchfab.com/3d-models?features=downloadable&sort_by=-likeCount

# javascript # 开发语言 # ecmascript
Logo
乐奇 Rokid 开放社区

更多推荐

用径向菜单完成 macOS 窗口管理的 Loop 上手指引

周三上午，你要同时摆好代码、终端、文档三个窗口。别急着来回拖拽，先按住触发键，把鼠标指向屏幕右侧，窗口就落进了右半屏。这就是 macOS 窗口管理工具 Loop，它用径向菜单和预览窗口，替掉了繁琐的拖边操作。## 🚀 5 步装好 Loop 并完成第一次窗口调整**第 1 步：安装**用 Homebrew 一行装好：```brew install loop```也可以克隆源

avatar 乐奇 Rokid 开放社区

注册 memU 的 Claude Code bridging 任务前，如何为 claude -p 准备好 headless 认证

memU 的 Claude Code bridging 任务是一个定时作业，它从裸的、非交互的环境里调用 `claude -p` 来挖掘最近的 Claude Code 会话并写入记忆。这意味着在注册这个定时任务之前，必须先有一个能独立解析、能 headless 认证的 `claude` CLI——[BRIDGING_TASK.md](https://link.gitcode.com/i/85f1a

avatar 乐奇 Rokid 开放社区

Plate 模板 CI 修复实战：Registry 辅助依赖与 RSC 客户端边界的完整排查指南

本文以 Plate 仓库中 [2026-04-06-fix-template-ci-registry-helper-deps.md](https://link.gitcode.com/i/4790f561dac586c6b2e17e1cadaa2911) 这份修复计划为骨架，完整复盘一次"模板 CI 构建失败"的真实排查过程：注册表（registry）UI/插件重构引入了一批辅助文件后，`plat

avatar 乐奇 Rokid 开放社区