SuperAPI AI 工具集

threejs-skills

数据与分析

查看项目

更新于 10-16 09:48

技能介绍

用途:在需要创建 3D 可视化、交互式 3D 体验或 WebGL/Canvas 渲染时,按系统化流程使用 Three.js 构建高质量 3D 场景,包括旋转模型、可探索场景、动画与粒子、三维数据展示等。

主要能力与设置模式:使用固定 CDN 版本 r128 引入:import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js";核心组件为 Scene、PerspectiveCamera(如 fov 75、aspect 为窗口宽高比、近裁剪 0.1、远裁剪 1000,camera.position.z = 5)、WebGLRenderer(antialias: true,setSize 后 appendChild 到页面)。动画使用 requestAnimationFrame 循环,在循环内更新对象变换并调用 renderer.render(scene, camera)。需处理窗口 resize:更新 camera.aspect、调用 updateProjectionMatrix 并重设 renderer 尺寸。

开发流程:先定义场景(对象、相机位置与视野、灯光、交互模型),再选几何体(BoxGeometry、SphereGeometry、CylinderGeometry、PlaneGeometry、TorusGeometry 等),然后选材质(MeshBasicMaterial 无光照;MeshStandardMaterial、MeshPhongMaterial、MeshLambertMaterial 需灯光),并添加 AmbientLight、DirectionalLight 等照明。

限制:不使用 CDN 上不可用的示例导入,如 THREE.OrbitControls;不使用 r128 不支持的 CapsuleGeometry(r142 引入),可用 CylinderGeometry 加两个 SphereGeometry 组合替代。相机控制需自行实现鼠标拖拽旋转与滚轮缩放逻辑。资料中未提供官方文档之外的额外收费、平台或效果信息。