Google AI Studio 区域限制与年龄验证解决方法及 Three.js 简介

简单来说，Three.js 是目前最流行的基于 JavaScript 的 3D 图形库。

它让开发者能够通过简单的 JavaScript 代码，在网页（Web 浏览器）中创建和显示复杂的 3D 动画和模型，而无需用户安装任何插件。

🔗官网：https://threejs.org/ 🔗官方教程（可以切换中文）：https://threejs.org/manual/

GitHub 地址，可以直接 clone 这个演示里面的所有代码：

（1）核心价值

• 底层技术 (WebGL): 浏览器渲染 3D 图形的原生标准是 WebGL (Web Graphics Library)。WebGL 直接调用显卡（GPU）进行计算，性能极高，但它的语法非常底层（接近汇编语言的复杂度），涉及大量的数学矩阵计算和着色器（GLSL）编写，对于普通前端开发者来说门槛极高。
• Three.js 的作用: 它把复杂的 WebGL 接口封装成了易于理解的 JavaScript 对象（如'场景'、'相机'、'物体'、'灯光'）。原本用 WebGL 需要几百行代码才能画出的一个立方体，用 Three.js 只需要几行代码。

（2）核心概念

• 场景 (Scene): 相当于拍摄场地。所有的物体、灯光都要放在这里。
• 相机 (Camera): 相当于摄像机。决定了用户从哪个角度观察这个世界（常用的有透视相机 PerspectiveCamera）。
• 渲染器 (Renderer): 相当于放映机。它负责把场景和相机看到的内容结合起来，计算并绘制在 HTML 的 画布上。

（3）能干啥

• 几何体 (Geometries): 也就是模型的形状（立方体、球体，或者导入外部 3D 模型如 .gltf, .obj）。
• 材质 (Materials): 物体的外观（颜色、纹理贴图、反光度、金属感）。
• 灯光 (Lights): 环境光、平行光、点光源等，用于制造阴影和立体感。
• 动画 (Animation): 支持骨骼动画和变形动画。
• 交互: 鼠标拾取物体、拖拽旋转视角（OrbitControls）。

（4）应用

• 数字孪生 (Digital Twins): 智慧城市、工厂流水线监控可视化。
• 3D 数据可视化：比如 3D 地球、气象数据展示（这可能与你感兴趣的地理信息 GIS 结合）。
• 电商展示：比如汽车 360 度看车、鞋子模型展示。
• 网页游戏：轻量级的 3D 网页小游戏。
• VR / AR: 结合 WebXR 技术实现虚拟现实体验。

示例：旋转立方体

import * as THREE from 'three';

export class Cube {
    constructor(scene, camera) {
        this.scene = scene;
        this.camera = camera;
        this.camera.position.set(0, 0, 5);
        const geometry = new THREE.BoxGeometry(2, 2, 2);
        const material = new THREE.MeshNormalMaterial(); // 这种材质颜色随法线方向变化，很好看
        this.mesh = new THREE.Mesh(geometry, material);
        this.scene.add(this.mesh);
    }

    update() {
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.01;
    }

    dispose() {
        this.mesh.geometry.dispose();
        this.mesh.material.dispose();
    }
}