Three.js 快速入门构建你的第一个 3D 应用

news2024/11/7 9:34:19

![

开发领域:前端开发 | AI 应用 | Web3D | 元宇宙
技术栈:JavaScript、React、Three.js、WebGL、Go
经验经验:6年+ 前端开发经验,专注于图形渲染和AI技术
开源项目:github 晓智元宇宙、数字孪生引擎、前端面试题
大家好!我是 [晓智],一位热爱探索新技术的前端开发者,在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步!

在这里插入图片描述

随着网页和应用对视觉效果要求的提高,3D 图形在前端开发中的应用越来越普遍。Three.js 是一种用于在浏览器中构建 3D 图形的 JavaScript 库,它封装了 WebGL,简化了 3D 图形的创建流程。本文将带你快速入门 Three.js,从基本概念到实现一个简单的 3D 场景。


什么是 Three.js?

Three.js 是一个用于在浏览器中创建和渲染 3D 图形的 JavaScript 库。它建立在 WebGL 之上,提供了更易于理解和操作的 API,大大降低了创建复杂 3D 应用的难度。

Three.js 的主要功能:
  • 3D 模型:创建、导入和操作复杂的 3D 模型。
  • 灯光和阴影:支持多种灯光类型和复杂的阴影效果。
  • 材质和纹理:允许应用多种材质和纹理,为场景增加真实感。
  • 相机控制:轻松设置和操控 3D 场景中的相机视角。
  • 动画:支持对象动画,创建流畅的 3D 过渡效果。

构建你的第一个 Three.js 3D 场景

接下来,我们将使用 Three.js 创建一个简单的 3D 场景,包括一个旋转的立方体、一个光源和一个相机。

步骤 1:引入 Three.js

可以通过 CDN 直接引入 Three.js,也可以使用 npm 安装。

通过 CDN 引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

通过 npm 安装:

npm install three

步骤 2:创建基本的 Three.js 场景

在 HTML 文件中创建一个 ,用于显示 3D 内容。然后在 JavaScript 文件中初始化场景。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js 入门</title>
  </head>
  <body>
    <canvas id="webgl-canvas"></canvas>
    <script src="app.js"></script>
  </body>
</html>
步骤 3:初始化场景、相机和渲染器

在 app.js 文件中编写代码,创建基本的场景、相机和渲染器。

import * as THREE from 'three';

const canvas = document.getElementById('webgl-canvas');
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({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
步骤 4:添加立方体

接下来,我们将创建一个立方体,并为其添加基础材质和颜色。

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建立方体网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

步骤 5:添加灯光

我们添加一个点光源,提升场景的光照效果。

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

步骤 6:渲染循环

最后,创建一个渲染循环,让立方体在场景中旋转起来。

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}
animate();

完整代码

将以上代码整合,形成一个完整的 3D 场景应用。

import * as THREE from 'three';

// 初始化场景
const canvas = document.getElementById("webgl-canvas");
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({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加灯光
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

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

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

    renderer.render(scene, camera);
}
animate();

展学习内容

使用 Three.js 创建的 3D 场景可以非常灵活,以下是一些可探索的进阶功能:

  • 材质和纹理:学习如何使用纹理贴图、透明度和环境光等效果,为对象添加更真实的材质。
  • 动画和物理效果:通过 Tween.js 等库实现平滑动画和物理模拟。
  • 交互控制:添加鼠标交互或使用 OrbitControls 控制相机视角,增强用户体验。
  • 导入 3D 模型:Three.js 支持加载 .obj、.glb 等 3D 模型,可以导入自定义模型为场景增色。

总结

Three.js 是一个强大、灵活的 3D 渲染库,能在浏览器中轻松创建互动 3D 场景。通过本文的内容,你应该能够了解并创建一个简单的 3D 场景。希望这篇文章帮助你快速入门 Three.js,享受 3D 开发的乐趣!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229692.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二:java 基础知识(2)-- 初始java/语法基础

目录 idea中文插件 第一个 Java 程序 Java数据类型&#xff0c;常量与变量 1. 数据类型 1.1 基本数据类型 1.2 引用数据类型 2. 常量 2.1 特性 2.2 定义常量 ​编辑 3. 变量 3.1 变量的定义与初始化 3.2 变量的类型 局部变量&#xff1a;在方法内声明的变量&#xff0…

【AAOS】【源码分析】CarSystemUI -- CarSystemBar

CarSystemBar不像Android手机那样固定的顶部“状态栏”和底部“导航栏”,而是将StatusBar和NavigationBar都统称为SystemBar,可以通过如下配置为每侧最多配置一个“系统栏”。 packages/apps/Car/SystemUI/res/values/config.xml<!-- Configure which system bars should …

企业物流管理数据仓库建设的全面指南

文章目录 一、物流管理目标二、总体要求三、数据分层和数据构成&#xff08;1&#xff09;数据分层&#xff08;2&#xff09;数据构成 四、数据存储五、数据建模和数据模型&#xff08;1&#xff09;数据建模&#xff08;2&#xff09;数据模型 六、总结 在企业物流管理中&…

多线程学习篇六:park / unpark

1. API LockSupport.park()&#xff1a;暂停当前线程LockSupport.unpark (线程对象)&#xff1a;恢复某个线程的运行 1.1 先 park 再 unpark main 线程睡眠时间大于 t1 线程睡眠时间 Slf4j(topic "c.Test01") public class Test01 {public static void main(Str…

计算机网络:网络层 —— IPv4 数据报的首部格式

文章目录 IPv4数据报的首部格式IPv4数据报分片生存时间 TTL字段协议字段首部检验和字段 IPv4数据报的首部格式 IPv4 数据报的首部格式及其内容是实现 IPv4 协议各种功能的基础。 在 TCP/IP 标准中&#xff0c;各种数据格式常常以32比特(即4字节)为单位来描述 固定部分&#x…

基于SSM演出道具租赁系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;道具类型管理&#xff0c;道具出租管理&#xff0c;租赁订单管理&#xff0c;道具归还管理&#xff0c;系统管理 商家账号功能包括&#xff1a;系统首页&…

《使用Gin框架构建分布式应用》阅读笔记:p272-p306

《用Gin框架构建分布式应用》学习第15天&#xff0c;p272-p306总结&#xff0c;总35页。 一、技术总结 1.TDD(test-driven development) 虽然经常看到TDD这个属于&#xff0c;从本人的工作经历看&#xff0c;实际开发中用得相对较少。 2.unitest(单元测试) go语言开发中&a…

三种SPI机制的了解及使用

文章目录 1.SPI机制概念2.Java SPI2.1 创建一个项目&#xff0c;并创建如下模块2.2 db-api模块2.3 mysql-impl模块2.4 oracle-impl模块2.5 main-project模块 3.Spring SPI4.Dubbo SPI 1.SPI机制概念 SPI全程Service Provider Interface&#xff0c;是一种服务发现机制。 SPI的…

【Linux系统编程】第四十弹---深入理解操作系统:信号捕捉、可重入函数、volatile关键字与SIGCHLD信号解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、捕捉信号 1.1、内核如何实现信号的捕捉 1.2、内核态与用户态 1.3.1、用户态&#xff08;User Space&#xff09; 1.3.2、…

【面试】数组中 Array.forEach()、Array.map() 遍历结束后是否改变原数组

forEach 、map 同理 数组内元素是 基本数据类型 时&#xff0c; 1.1. 直接给 item赋值&#xff0c;是 不会改变原数组 的&#xff08;如图中1&#xff09;&#xff0c; 1.2. 通过 原数组索引赋值 是会改变原数组的&#xff08;如图中2&#xff09;数组内元素是 复杂数据类型 时…

List<T>属性和方法使用

//author&#xff1a;shark_ddd using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;//使用函数来减少长度namespace List_T {class Student{public string Name { get; set; }public int Age { get; set; …

liunx CentOs7安装MQTT服务器(mosquitto)

查找 mosquitto 软件包 yum list all | grep mosquitto出现以上两个即可进行安装&#xff0c;如果没有出现则需要安装EPEL软件库。 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm查看 mosquitto 信息 yum info mosquitto安装 mosquitt…

视频去水印软件哪个好?这些软件值得一试

无论是社交媒体上的短视频&#xff0c;还是专业网站上的长视频&#xff0c;去除视频中的水印成为了许多人的需求。 选择一款合适的视频去水印软件&#xff0c;可以帮助我们轻松去除视频中的不必要标记&#xff0c;保持视频的完整性和美观。 那么&#xff0c;视频去水印软件哪…

qt QDoubleSpinBox详解

1、概述 QDoubleSpinBox是Qt框架中的一个控件&#xff0c;专门用于浮点数&#xff08;即小数&#xff09;的输入和调节。它提供了一个用户界面元素&#xff0c;允许用户在预设的范围内通过拖动滑块、点击箭头或使用键盘来递增或递减浮点数值。QDoubleSpinBox通常用于需要精确数…

在基于AWS EC2的云端k8s环境中 搭建开发基础设施

中间件下载使用helm,这里部署的都是单机版的 aws-ebs-storageclass.yaml apiVersion: storage.k8s.io/v1 kind: StorageClass metadata:name: aws-ebs-storageclass provisioner: kubernetes.io/aws-ebs parameters:type: gp2 # 选择合适的 EBS 类型&#xff0c;如 gp2、io1…

MATLAB与STK互联:仿真并获取低轨卫星与指定区域地面站的可见性数据

MATLAB控制STK实现&#xff1a;仿真并获取低轨卫星与指定区域地面站的可见性数据 本次仿真主要参考了多篇文献和网站&#xff0c;包括但不限于&#xff1a;《Using MATLAB for STK Automation》、CSDN博文&#xff1a; 拜火先知的博客_CSDN博客-笔记、AGI官网有关MATLAB的内容…

docker engine stopped

1&#xff09;环境&#xff1a;win 10 2&#xff09;docker安装时已经已经安装了虚拟机 3&#xff09;启用网络适配器 4&#xff09;启用docker服务&#xff08;依赖服务LanmanServer&#xff09; 5&#xff09;全都弄好了&#xff0c;docker还是打不开&#xff0c;没办法了&a…

天翼网关 3.0 兆能 ZNHG600 获取超级密码改桥接

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 前不久朋友家断网&#xff0c;喊了宽带师傅修完之后&#xff0c;光猫就从桥接模式变成了路由模式。虽然对于日常上网来说区别不大&#xff0c;但这条宽带有公网 IP&#xff0c;通过光猫拨号的话&#xff0…

C语言常见进制 (二进制、八进制、十进制、十六进制)详解

C语言常见进制的详解 放在最前面的前言&#xff1a;1、分类2、二进制&#xff08;2.1&#xff09;二进制的解释说明&#xff08;2.2&#xff09;关于二进制的计算&#xff08;2.3&#xff09; 二进制转换为八进制&#xff08;2.4&#xff09; 二进制转换为十进制 3、八进制&…

在 .NET 8 Web API 中实现 Entity Framework 的 Code First 方法

本次介绍分为3篇文章&#xff1a; 1&#xff1a;.Net 8 Web API CRUD 操作.Net 8 Web API CRUD 操作-CSDN博客 2&#xff1a;在 .Net 8 API 中实现 Entity Framework 的 Code First 方法https://blog.csdn.net/hefeng_aspnet/article/details/143229912 3&#xff1a;.NET …