three.js画3d模型

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，用于在浏览器中创建和显示 3D 图形。它简化了 WebGL 编程的复杂性，使得开发者能够更容易地创建交互式的 3D 网页应用程序。

基础概念

WebGL: 是一种在不需要任何插件的情况下，在任何兼容的 Web 浏览器中呈现 3D 图形和 2D 图形的 JavaScript API。

Three.js: 是建立在 WebGL 之上的一个库，提供了大量的API来创建和操作3D对象，如几何体、材质、灯光、相机等。

优势

易用性: Three.js 提供了简单的高级 API，减少了直接操作 WebGL 的复杂性。
跨平台: 可以在任何现代浏览器中运行，无需额外插件。
社区支持: 拥有庞大的开发者社区，丰富的文档和示例代码。
灵活性: 可以创建各种复杂的3D场景和应用。

类型

Three.js 中的主要对象类型包括：

场景（Scene）: 所有3D对象的容器。
相机（Camera）: 定义了观察场景的角度和位置。
渲染器（Renderer）: 负责将3D场景渲染到屏幕上。
几何体（Geometry）: 定义了3D模型的形状。
材质（Material）: 定义了几何体的外观。
灯光（Lights）: 模拟光源，影响场景中的光照效果。

应用场景

游戏开发: 创建3D游戏和互动体验。
数据可视化: 将复杂数据以3D形式展示。
虚拟现实（VR）和增强现实（AR）: 构建沉浸式的3D环境。
艺术和设计: 创作3D艺术作品和动画。
教育和培训: 制作互动教学材料。

示例代码

以下是一个简单的 Three.js 示例，用于创建一个旋转的立方体：

// 引入 three.js 库
import * as THREE from 'three';

// 创建场景
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 geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建立方体并添加到场景
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

animate();