three.js创建几何体

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，用于在浏览器中创建和显示 3D 图形。它简化了 WebGL 编程，使得开发者可以更容易地创建复杂的 3D 场景。

基础概念

几何体（Geometry）：在 Three.js 中，几何体是定义 3D 对象形状的基本结构。它由顶点（Vertices）、边（Edges）和面（Faces）组成。

类型

Three.js 提供了多种内置几何体类型，包括但不限于：

BoxGeometry：立方体
SphereGeometry：球体
CylinderGeometry：圆柱体
TorusGeometry：圆环体
PlaneGeometry：平面

应用场景

游戏开发：用于创建游戏中的角色、环境和道具。
数据可视化：展示复杂的数据集，如分子结构、地理信息系统等。
虚拟现实（VR）和增强现实（AR）：构建沉浸式的体验。
艺术和设计：创作独特的视觉艺术作品。

示例代码

以下是一个简单的示例，展示如何使用 Three.js 创建一个立方体并显示在网页上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    // 创建场景
    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(1, 1, 1);
    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();
</script>
</body>
</html>