Three.js 快速入门教程【一】开启你的 3D Web 开发之旅

ops/2025/2/22 10:06:07/

请添加图片描述

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型

文章目录

  • 系列文章目录
  • 一、Three.js 是什么
  • 二、Three.js 应用场景
  • 三、环境搭建（两种方式任选）
  • 四、核心概念
    • 1. 场景（Scene）
    • 2. 相机（Camera）
    • 3.几何体（Geometry）
    • 4、材质（Material）
    • 5. 网格（Mesh）
    • 6. 渲染器（Renderer）
  • 五、牛刀小试
  • 总结

一、Three.js 是什么

    Three.js是一个基于WebGL封装的轻量级3D库，它将晦涩难懂的WebGL API封装成易读的JavaScript接口，让开发者无需深入了解 WebGL 的复杂细节，就能用简洁的代码创建出精美的 3D 场景。

二、Three.js 应用场景

1、数据可视化：将枯燥的报表变成旋转的3D图表
2、产品展示：让用户在网页中360°查看产品细节
3、3D网页游戏：开发轻量级的3D小游戏
4、建筑和室内设计：构建虚拟的建筑模型或室内设计方案，用户可以在浏览器中自由查看和导航这些 3D 场景，提前感受设计效果。
5、虚拟现实（VR）和增强现实（AR）：与 WebVR 和 WebXR API 集成，用于创建沉浸式的 VR 和 AR 应用，用户可以在浏览器中体验身临其境的虚拟环境或与现实环境叠加的增强现实效果。

三、环境搭建（两种方式任选）

方式一：CDN直连（适合测试或新手）

javascript">!-- 在<head>中引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r162/three.min.js"></script></script>

方式二：npm安装（适合项目开发）

javascript">npm install three

javascript">// 使用时导入
import * as THREE from 'three';

四、核心概念

在这里插入图片描述

在Three.js中创建一个最基本的3D场景需要六个核心要素：场景（Scene）、相机（Camera）几何体（Geometry）、材质（Material）、网格（Mesh），最后通过渲染器（WebGLRenderer）将场景和相机的信息渲染到网页中，并通过动画循环实现持续更新，形成动态3D效果。

1. 场景（Scene）

作用：3D 世界的容器，所有物体、光源、相机的载体，所有要在屏幕上显示的元素都需要添加到场景中。

javascript">// 创建一个场景
const scene = new THREE.Scene();
//通过scene.add(元素)添加元素

2. 相机（Camera）

作用：决定从哪个角度观察场景中的对象，就像现实世界中摄影师使用的相机一样

相机分为2种类型：透视相机、正交相机

透视相机：模拟人眼的视觉效果，远处的物体看起来比近处的物体小，具有透视效果。

正交相机：物体的大小不会随着距离的变化而改变，常用于 2D 游戏或 UI 设计。

3D开发场景中透视相机用的比较多，入门掌握透视相机即可。

透视相机（PerspectiveCamera）

javascript">// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(75, // 视场角（FOV）window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面3000 // 远裁剪面
);//设置相机位置
camera.position.set(100, 100, 100);

3.几何体（Geometry）

作用：定义了 物体的形状，例如长方体、球体、圆柱体等。常用内置几何体：

BoxGeometry（长方体）

SphereGeometry（球体）

CylinderGeometry（圆柱体）

javascript">// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个球体
const geometry2 = new THREE.SphereGeometry(10);
//创建一个圆柱体
const geometry = new THREE.CylinderGeometry(10,10,50);

4、材质（Material）

作用：定义物体的外观（颜色、纹理、透明度等）。常用材质：

MeshBasicMaterial（基础材质，不受光影响，始终显示为指定的颜色或纹理。）

MeshPhongMaterial（高光材质，受光影响，面有高光反射效果。）

javascript">// 创建一个基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x000000 });

5. 网格（Mesh）

 几何体 + 材质 = 网格

网格是几何体和材质的组合，它将几何体的形状和材质的外观结合起来，形成一个完整的 3D 对象（物体）。创建网格后，需要将其添加到场景中才能显示。

javascript">// 创建立方体（宽，高，深）
const geometry = new THREE.BoxGeometry(1, 1, 1);// 基础材质（可配置颜色、贴图等）
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建网格对象
const mesh= new THREE.Mesh(geometry, material);
scene.add(mesh);

6. 渲染器（Renderer）

渲染器负责将场景和相机的信息转化为屏幕上的图像。它使用 WebGL 或 Canvas 等技术在网页上绘制 3D 图形。Three.js 提供了多种渲染器，最常用的是 WebGL 渲染器（THREE.WebGLRenderer）。

javascript">// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);

五、牛刀小试

通过上面的介绍我们了解了three.js核心概念和基本的使用方式，下面用代码来演示一个简单的3d案例——实现一个正方体3D效果

代码示例：

javascript">import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";//创建场景
const scene = new THREE.Scene();
//设置黑色背景色
scene.background = new THREE.Color(0x000000);//创建一个正方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
//创建一个基础材质，颜色指定红色
const material = new THREE.MeshBasicMaterial({ color: "red" });//创建一个网格对象
const mesh = new THREE.Mesh(geometry, material);
//设置网格对象位置
mesh.position.set(0, 0, 0);
//添加到场景中
scene.add(mesh);//创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
//设置相机位置
camera.position.set(0, 10, 30);
//相机默认看向网格对象
camera.lookAt(mesh.position);//创建渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器尺寸为页面宽高
renderer.setSize(document.documentElement.clientWidth,document.documentElement.clientHeight
);
//将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);// 新建一个相机控件
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼（惯性效果）
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 动画循环
function animate() {// 定时刷新requestAnimationFrame(animate);// 更新控制器,必须调用以应用阻尼效果controls.update();//重新渲染renderer.render(scene, camera);
}
// 执行动画
animate();

运行效果：
3d0d9c451d44fba2622ffaf05ff161.gif" alt="请添加图片描述" />

说明：上述示例中我们引入了OrbitControls控制器 ，OrbitControls 是一个用于实现交互式场景相机控制的工具库。它允许用户通过鼠标（或触摸屏）直接操作 3D 场景的观察视角，如同在轨道上环绕目标物体一般，常用于提升 Web 3D 应用的交互体验。代码结尾通过requestAnimationFrame递归形式循环调用animate函数，达到页面持续刷新效果。在 Three.js 开发中，几乎所有的动态场景（如旋转模型、交互操作、自动动画）都需要通过 requestAnimationFrame 驱动持续渲染。

总结

    通过本篇教程，我们认识了什么是Three.js和Three.js应用场景，共同探索了Three.js的核心概念与基础用法。从构建场景（Scene）、相机（Camera）到渲染器（Renderer）的"铁三角"架构，再到几何体（Geometry）、材质（Material）与网格（Mesh）的有机结合，至此你已经了解并掌握了创建最基础三维场景的核心工具链。

更多three.js入门知识点请关注该系列教程后续的更新。


http://www.ppmy.cn/ops/160484.html

相关文章

DeepSeek破局启示录：一场算法优化对算力霸权的降维打击

DeepSeek破局启示录：一场算法优化对算力霸权的降维打击

导言 2024年，中国AI大模型赛道杀出一匹黑马——深度求索（DeepSeek）。从数学推理能力超越GPT-4，到API价格仅为Claude 3.5的1/53，再到开源生态的快速扩张，DeepSeek的崛起不仅打破了“算力霸权”的固有认知，更揭示了AI行业底层逻辑的深刻变革。这场技术革命背后，隐藏着技术…
阅读更多...
Android TabLayout 实现随意控制item之间的间距

Android TabLayout 实现随意控制item之间的间距

效果 红色标注是不同的间距。 实现方式 1、xml中定义 <com.google.android.material.tabs.TabLayoutandroid:id"id/tab_layout"android:layout_width"wrap_content"app:tabIndicatorColor"color/color_FF00B2E3"app:tabBackground"a…
阅读更多...
STM32的HAL库开发---单通道ADC采集（DMA读取）实验

STM32的HAL库开发---单通道ADC采集（DMA读取）实验

一、实验简介 正常单通道ADC采集顺序是先开启ADC采集&#xff0c;然后等待ADC转换完成&#xff0c;也就是判断EOC位置1&#xff0c;然后再读取数据寄存器的值。 如果配置了DMA功能&#xff0c;在EOC位被硬件置1后&#xff0c;自动产生DMA请求&#xff0c;然后DMA进行数据搬运…
阅读更多...
【c语言初阶】函数_递归和迭代

【c语言初阶】函数_递归和迭代

前言&#xff1a; 内容&#xff1a; n的阶乘的公式&#xff0c;什么情况&#xff0c;怎么没有听懂 我咋知道n的阶乘公式啊 就是这个&#xff0c;老师说知道n的阶乘公式就容易写递归函数了&#xff0c;算了没阿关系 n!(fac(n)) 1 ,n<1 n*fac(n-1) 计算n的阶乘 &#x…
阅读更多...
【愚公系列】《Python网络爬虫从入门到精通》025-进程间通信

【愚公系列】《Python网络爬虫从入门到精通》025-进程间通信

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…
阅读更多...
本地部署DeepSeek R1大模型

本地部署DeepSeek R1大模型

一、安装软件 1.1 安装Ollama 你可以访问Ollama的官方网站https://ollama.com/download&#xff0c;选择适合你操作系统的安装包进行下载。老周这里是Mac系统&#xff0c;所以选择下载macOS系统。 1.2 安装cherry studio 前往官网https://cherry-ai.com/download下载对应操…
阅读更多...
【Gin-Web】Bluebell社区项目梳理3：社区相关接口开发

【Gin-Web】Bluebell社区项目梳理3：社区相关接口开发

本文目录 一、接口详情1. 获取分类社区列表接口2. 根据id查询社区 二、值类型与引用类型 一、接口详情 跟社区有关的接口详情如下。 1. 获取分类社区列表接口 首先是Controller层&#xff0c;然后跳转到Logic层业务逻辑的开发。 这是Logic层&#xff0c;再做一次跳转&#…
阅读更多...
支持向量机 (Support Vector Machine, SVM)

支持向量机 (Support Vector Machine, SVM)

支持向量机 (Support Vector Machine, SVM) 支持向量机&#xff08;SVM&#xff09;是一种广泛应用于分类、回归分析以及异常检测的监督学习算法。它基于结构风险最小化&#xff08;Structural Risk Minimization&#xff0c;SRM&#xff09;原则&#xff0c;通过寻找一个最优…
阅读更多...
最新文章

Copyright @ 2022~2023