Three.js - 打开Web 3D世界的大门

文章目录

    • 前言
    • 一、Three.js 的起源与背景
    • 二、Three.js 的特点
    • 三、Three.js 的核心组件详解
    • 四、实际应用案例
    • 结语

前言

Three.js 是一个基于JavaScript的库，它极大地简化了使用WebGL创建3D图形的过程。通过封装复杂的WebGL API，Three.js为开发者提供了一个更加友好和高效的开发环境，使得即使是对3D编程不太熟悉的开发者也能够快速上手，并创造出令人印象深刻的交互式3D内容。

一、Three.js 的起源与背景

Three.js 是由一位西班牙的开发者 Ricardo Cabello（又名 Mr.doob）于2010年发起的项目。其初衷是为了简化WebGL（Web Graphics Library）的使用难度，因为直接使用WebGL进行3D渲染需要大量的代码编写，并且API相对复杂。Three.js通过封装WebGL的功能，提供了一个更加友好、易于使用的接口，使得更多的开发者可以快速上手并创造出令人惊艳的3D内容。

二、Three.js 的特点

  • 易用性：Three.js 提供了丰富的文档和支持，拥有庞大的社区，对于初学者来说是一个很好的入门选择。
  • 跨平台兼容性：由于它是基于WebGL构建的，因此可以在任何支持HTML5和WebGL的浏览器上运行，无需安装额外的插件。
  • 广泛的适用性：无论是游戏开发、虚拟现实应用还是数据可视化，Three.js都能提供强有力的支持。
  • 性能优化：随着版本迭代，Three.js不断改进性能，确保即使是在处理复杂场景时也能保持流畅。

三、Three.js 的核心组件详解

场景（Scene）

场景是所有3D对象、光源和其他元素的容器。在Three.js中，我们首先需要创建一个场景对象，然后将其他组件添加到这个场景中。

const scene = new THREE.Scene();

相机（Camera）

相机决定了用户从哪个视角观看场景。Three.js提供了多种类型的相机，如透视相机（PerspectiveCamera），它模仿人眼的视觉效果，适合大多数应用场景；还有正交相机（OrthographicCamera），它用于创建技术图纸或UI元素等不需要透视效果的内容。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

渲染器（Renderer）

渲染器负责将场景中的内容绘制到HTML页面上的canvas元素中。Three.js支持多种渲染器，但最常用的是WebGLRenderer，因为它提供了最好的性能和兼容性。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

物体（Object）

物体是由几何形状（Geometry）和材质（Material）组成的3D模型。Three.js内置了许多常见的几何形状，比如球体、立方体、圆柱体等，并且可以通过自定义几何体来实现更复杂的设计。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

动画与交互

Three.js不仅限于静态图像，还支持动画和用户交互。你可以使用requestAnimationFrame循环更新场景，或者监听鼠标事件来响应用户的操作。

function animate() {requestAnimationFrame(animate);// 更新物体的位置或旋转等属性cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();

四、实际应用案例

案例1：旋转的立方体

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</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>// 创建场景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, wireframe: true });// 创建一个网格（几何体 + 材质）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();// 处理窗口大小调整window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>

案例2：轨道运动动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</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>// 初始化场景、相机和渲染器var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);var renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建球体并设置初始位置function createOrbitingSphere(radius, distance, speed) {var geometry = new THREE.SphereGeometry(radius, 32, 32);var material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });var sphere = new THREE.Mesh(geometry, material);sphere.position.x = distance;sphere.distance = distance;sphere.angle = 0;sphere.speed = speed;scene.add(sphere);return sphere;}var spheres = [];for (var i = 0; i < 10; i++) {spheres.push(createOrbitingSphere(0.5 + Math.random(), 5 + i * 2, 0.005 + Math.random() * 0.01));}camera.position.z = 20;function animate() {requestAnimationFrame(animate);spheres.forEach(function (sphere) {sphere.angle += sphere.speed;sphere.position.x = Math.cos(sphere.angle) * sphere.distance;sphere.position.y = Math.sin(sphere.angle) * sphere.distance;});renderer.render(scene, camera);}animate();// 窗口调整事件处理window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>

案例3：随机生成的粒子系统

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</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>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);var renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.z = 50;var particlesCount = 5000;var particlesGeometry = new THREE.BufferGeometry();var particlesPositions = new Float32Array(particlesCount * 3);for (var i = 0; i < particlesCount * 3; i++) {particlesPositions[i] = (Math.random() - 0.5) * 100;}particlesGeometry.setAttribute('position', new THREE.BufferAttribute(particlesPositions, 3));var particlesMaterial = new THREE.PointsMaterial({ color: 0x00ff00 });var particles = new THREE.Points(particlesGeometry, particlesMaterial);scene.add(particles);function animateParticles() {var positions = particles.geometry.attributes.position.array;for (var i = 0; i < positions.length; i += 3) {positions[i + 1] -= 0.1;if (positions[i + 1] < -50) {positions[i + 1] = 50;}}particles.geometry.attributes.position.needsUpdate = true;}function animate() {requestAnimationFrame(animate);animateParticles();renderer.render(scene, camera);}animate();// 窗口调整事件处理window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>

结语

Three.js作为Web 3D开发的强大工具，正在不断推动着网络技术的发展边界。无论是创建沉浸式的用户体验、教育工具，还是进行复杂的数据可视化，Three.js都展现出了其独特的价值。随着社区的不断壮大和技术的进步，Three.js的应用前景无疑将更加广阔。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

恒压恒流原边反馈控制芯片 CRE6289F

恒压恒流原边反馈控制芯片 CRE6289F

CRE6289F 系列产品是一款内置高压 MOS 功率开关管的高性能多模式原边控制的开关电源芯片。较少的外围元器件、较低的系统成本设计出高性能的交直流转换开关电源。CRE6289F 系列产品提供了极为全面和性能优异的智能化保护功能&#xff0c;包括逐周期过流保护、软启动、芯片过温保…
阅读更多...
开源 AI 智能名片 2+1 链动模式商城小程序在商业营销中的心理博弈与策略应用

开源 AI 智能名片 2+1 链动模式商城小程序在商业营销中的心理博弈与策略应用

摘要&#xff1a;在当今竞争激烈的商业环境中&#xff0c;理解消费者心理对营销成败起着关键作用。本文聚焦于消费者 “占便宜” 心理&#xff0c;深入探讨开源 AI 智能名片 21 链动模式商城小程序如何利用这一心理&#xff0c;在 “双十一”“双十二” 等购物热潮背景下&#…
阅读更多...
01 数据分析介绍及工具准备

01 数据分析介绍及工具准备

数据分析介绍及工具准备 一、工具准备二、下载和使用Anaconda三、jupyter notebook常用快捷键 一、工具准备 数据科学库 NumPy&#xff0c;SciPy&#xff0c;Pandas&#xff0c;Scikit-Learn 数据可视化库 Matplotlib&#xff0c;Seaborn 编译器 Jupyter Notebook 数据科…
阅读更多...
opencv摄像头标定程序实现

opencv摄像头标定程序实现

摄像头标定是计算机视觉中的一个重要步骤&#xff0c;用于确定摄像头的内参&#xff08;如焦距、主点、畸变系数等&#xff09;和外参&#xff08;如旋转矩阵和平移向量&#xff09;。OpenCV 提供了方便的工具来进行摄像头标定。下面分别给出 C 和 Python 的实现。 1. C 实现…
阅读更多...
java项目之网上租贸系统源码（springboot+mysql+vue）

java项目之网上租贸系统源码（springboot+mysql+vue）

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的网上租贸系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于Spring Boot的网上租贸…
阅读更多...
协方差矩阵

协方差矩阵

协方差矩阵是一个对称矩阵&#xff0c;用来描述多个随机变量之间的协方差关系。协方差反映了两个随机变量如何共同变化的趋势&#xff0c;协方差矩阵将这种关系扩展到了多维数据。 1. 定义 假设有一个 n 维随机向量 &#xff0c;协方差矩阵 Σ 定义为&#xff1a; 其中&#…
阅读更多...
deepin系统下开放指定端口

deepin系统下开放指定端口

一、安装ufw 若已安装则跳过 sudo apt-get install ufw二、查看防火墙状态 sudo ufw status三、打开防火墙 sudo ufw enable四、开放端口 sudo ufw allow 6654/tcp五、windows下测试远程端口 telnet 192.168.1.22 6654六、关闭防火墙 sudo ufw disable附上ufw的全部命令…
阅读更多...
我在广州学 Mysql 系列——与索引相关的练习题

我在广州学 Mysql 系列——与索引相关的练习题

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天星期二啦&#xff0c;还有三天就是星期五了&#xff0c;为了美好生活奋斗吧朋友们&#xff01; 本文将学习MYSQL中数据表内容的索引相关练习题目~~ 复习&#xff1a;&#x1f449;【索引详解】 数据库专栏&#x1f449;【数据…
阅读更多...
通过 route 或 ip route 管理Linux主机路由

通过 route 或 ip route 管理Linux主机路由

目录 一&#xff1a;route 使用说明1、查看路由信息2、删除指定路由3、增加指定路由 二&#xff1a;ip route 使用说明1、查看主机路由2、新增主机路由3、删除主机路由 通过route 或者ip route修改Linux主机路由后属于临时生效&#xff0c;系统重启后就恢复默认值了&#xff0c…
阅读更多...
SASS 简化代码开发的基本方法

SASS 简化代码开发的基本方法

概要 本文以一个按钮开发的实例&#xff0c;介绍如何使用SASS来简化CSS代码开发的。 代码和实现 我们希望通过CSS开发下面的代码样式&#xff0c;从样式来看&#xff0c;每个按钮的基本样式相同&#xff0c;就是颜色不同。 如果按照传统的方式开发&#xff0c;需要开发btn &…
阅读更多...
flutter 专题三十六 Flutter动态化框架Thresh

flutter 专题三十六 Flutter动态化框架Thresh

一、前言 移动端技术栈自诞生以来&#xff0c;其双端开发成本和发布效率一直广受诟病。为了解决这些问题&#xff0c;前端跨端技术一直在不断尝试&#xff0c;希望能一次开发、多端运行并且能做到快速发布。期间经历了多个技术发展阶段。 第一阶段&#xff1a;以H5为代表&…
阅读更多...
python制作翻译软件

python制作翻译软件

本文复刻此教程&#xff1a;制作属于自己的翻译软件-很简单【Python】_哔哩哔哩_bilibili 一、明确需求&#xff08;以搜狗翻译为例&#xff09; &#xff08;1&#xff09;网址&#xff1a;https://fanyi.sogou.com/text &#xff08;2&#xff09; 数据&#xff1a;翻译内容…
阅读更多...
【C++】20.二叉搜索树

【C++】20.二叉搜索树

文章目录 1. 二叉搜索树的概念2. 二叉搜索树的性能分析3. 二叉搜索树的插入4. 二叉搜索树的查找5. 二叉搜索树的删除6. 二叉搜索树的实现代码7. 二叉搜索树key和key/value使用场景7.1 key搜索场景&#xff1a;7.2 key/value搜索场景&#xff1a;7.3 主要区别&#xff1a;7.4 ke…
阅读更多...
Opencv图片的旋转和图片的模板匹配

Opencv图片的旋转和图片的模板匹配

图片的旋转和图片的模板匹配 目录 图片的旋转和图片的模板匹配1 图片的旋转1.1 numpy旋转1.1.1 函数1.1.2 测试 1.2 opencv旋转1.2.1 函数1.2.2 测试 2 图片的模板匹配2.1 函数2.2 实际测试 1 图片的旋转 1.1 numpy旋转 1.1.1 函数 np.rot90(kl,k1)&#xff0c;k1逆时针旋转9…
阅读更多...
重温设计模式--13、策略模式

重温设计模式--13、策略模式

策略模式介绍 文章目录 策略模式介绍C 代码示例 策略模式是一种行为设计模式&#xff0c;它允许在运行时选择算法的行为。该模式将算法的定义和使用分离开来&#xff0c;使得算法可以独立于使用它的客户端而变化&#xff0c;提高了代码的灵活性和可维护性。 其主要包含以下几个…
阅读更多...
【GOOD】A Survey of Deep Graph Learning under Distribution Shifts

【GOOD】A Survey of Deep Graph Learning under Distribution Shifts

深度图学习在分布偏移下的综述&#xff1a;从图的分布外泛化到自适应 Northwestern University, USA Repository Abstract 图上的分布变化——训练和使用图机器学习模型之间的数据分布差异——在现实世界中普遍存在&#xff0c;并且通常不可避免。这些变化可能会严重恶化模…
阅读更多...
【Axure高保真原型】环形进度条（开始暂停效果）

【Axure高保真原型】环形进度条（开始暂停效果）

今天和大家分享环形进度条&#xff08;开始暂停效果&#xff09;的原型模版&#xff0c;效果包括&#xff1a; 点击开始按钮&#xff0c;可以环形进度条开始读取&#xff0c;中部百分比显示环形的读取进度&#xff1b; 在读取过程中&#xff0c;点击暂停按钮&#xff0c;可以随…
阅读更多...
Euler 21.10（华为欧拉）安装oracle19c-RAC

Euler 21.10（华为欧拉）安装oracle19c-RAC

1. Euler 21.10安装oracle19c-RAC 1.1. 环境规划 1.1.1. 主机规划 hostname IP 实例名 hfdb90 192.168.40.90 hfdb1 hfdb91 192.168.40.90 hfdb2 系统版本 BigCloud Enterprise Linux For Euler 21.10 (GNU/Linux 4.19.90-2107.6.0.0100.oe1.bclinux.x86_64 x86_6…
阅读更多...
【python】matplotlib（radar chart）

【python】matplotlib（radar chart）

文章目录 1、功能描述和原理介绍2、代码实现3、效果展示4、完整代码5、多个雷达图绘制在一张图上6、参考 1、功能描述和原理介绍 基于 matplotlib 实现雷达图的绘制 一、雷达图的基本概念 雷达图&#xff08;Radar Chart&#xff09;&#xff0c;也被称为蛛网图或星型图&…
阅读更多...
Business Cooperation Process

Business Cooperation Process

Business Cooperation Process 商务合作基本流程 并不是每个人都能做到言而有信的&#xff0c;因此还是需要流程来约束的。
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023