Three.js 教程，3D 网页开发入门指南

Three.js 是一款强大的3D库，适用于网页开发，本教程为初学者提供全面指导，涵盖Three.js基础、场景搭建、坐标系、几何体、材质与纹理、灯光与阴影、相机与渲染、交互功能以及优化技巧。，从安装 Three.js 开始，逐步深入理解其功能和API，通过实例学习不同场景下的应用，并掌握优化策略，提升网页性能和用户体验，掌握这些知识，您将能够创建令人印象深刻的3D网页作品。

随着 Web 技术的不断发展，3D 交互式网页设计已经成为现代网页开发中不可或缺的一部分，Three.js 是一个流行的 JavaScript 库，它简化了在浏览器中创建和显示 3D 图形的过程，本文将为您提供一个全面的 Three.js 教程，帮助您快速上手 3D 网页开发。

第一步：设置开发环境

在开始编写 Three.js 代码之前，您需要确保您的开发环境中已经安装了以下内容：

Node.js：访问 Node.js 官网下载并安装最新版本的 Node.js。
npm：安装 Node.js 后，您将拥有 npm（Node.js 包管理器），它可以帮助您安装和管理 JavaScript 库和依赖项。
一个代码编辑器：推荐使用 Visual Studio Code 或者 Sublime Text 等现代代码编辑器。
一个浏览器：Three.js 在现代浏览器上运行良好，推荐使用最新版本的 Chrome、Firefox 或 Safari。

第二步：创建第一个 Three.js 场景

在您的 HTML 文件中，添加以下代码来创建一个基本的 Three.js 场景：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Three.js 教程</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.min.js"></script>
<script>
    // 创建场景
    var scene = new THREE.Scene();
    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 创建一个立方体几何体和材质，并添加到场景中
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var 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>

这段代码创建了一个简单的场景,其中包含一个绿色的立方体。animate 函数使得立方体旋转。