ThreeJS入门教程：关键函数与几何体解析

"这是关于three.js库的一份笔记，主要涵盖了创建场景、相机、渲染器、光照和几何体的基本使用方法，旨在帮助读者快速理解和应用three.js进行3D图形编程。" 在Web开发中，three.js是一个强大的JavaScript库，用于创建和展示三维图形。下面将详细解释标题和描述中涉及的知识点： 1. **创建场景(Scene)** `THREE.Scene` 是所有3D对象的容器。创建一个场景实例后，你可以通过调用 `scene.add(object)` 将物体添加到场景中。 2. **相机(Camera)** - `THREE.OrthographicCamera` 用于创建正交相机，适用于2D渲染或等距投影。参数包括左、右、上、下边界以及近、远裁剪面。 - `THREE.PerspectiveCamera` 用于创建透视相机，模拟人眼看到的3D效果。参数包括视场角度（fov）、宽高比（aspect）、近裁剪面（near）和远裁剪面（far）。 3. **渲染器(Renderer)** `THREE.WebGLRenderer` 创建了一个WebGL渲染器，用于将3D场景绘制到HTML页面上。可以设置选项如颜色、分辨率等。调用 `renderer.setSize(width, height)` 设置渲染区域大小，将 `renderer.domElement` 添加到HTML元素中显示。 4. **设置背景色** 使用 `renderer.setClearColor(color, opacity)` 可以设置渲染器的背景颜色，其中color是16进制颜色值，opacity是透明度。 5. **渲染场景** 调用 `renderer.render(scene, camera)` 方法，将场景按照指定相机视角进行渲染。 6. **光照(Light)** - `THREE.AmbientLight` 创建环境光，对场景中的所有物体均匀照明。 - `THREE.PointLight` 创建点光源，光源位置可变，光线向所有方向传播。 - `THREE.DirectionalLight` 创建平行光，常用来模拟太阳光，光线方向恒定。 - `THREE.SpotLight` 创建聚光灯，有特定的方向和聚焦点。 7. **几何体(Geometry)** - `THREE.CubeGeometry` 创建立方体几何体，可以设置长度、宽度和高度。 - `THREE.PlaneGeometry` 创建平面几何体，设置宽度和高度。 - `THREE.SphereGeometry` 创建球体几何体，提供半径、纬度段和经度段参数。 - `THREE.CircleGeometry` 创建圆形几何体，定义半径、细分和旋转起始角度。 - `THREE.CylinderGeometry` 创建圆柱体，定义顶部半径、底部半径、高度和是否开启顶底面。 - `THREE.TetrahedronGeometry`、`THREE.OctahedronGeometry`、`THREE.IcosahedronGeometry` 分别创建四面体、八面体和二十面体，可调整几何体的平滑级别。 - `THREE.TorusGeometry` 创建环面几何体，定义环半径、管半径、细分参数。 这些基本概念和方法构成了使用three.js构建3D场景的基础。通过组合不同类型的相机、光照和几何体，开发者可以创造出各种复杂的3D视觉效果。在实际项目中，还需要考虑材质(Material)、纹理(Texture)、动画(Animation)等方面，以实现更加生动和交互式的3D场景。