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开发：第十三天

后端Java开发：第十三天

第十三天&#xff1a;继承 - 面向对象的核心概念 欢迎来到第十三天的学习&#xff01;今天&#xff0c;我们将深入探讨 Java 中的 继承&#xff08;Inheritance&#xff09;&#xff0c;这是面向对象编程的四大基本特性之一。继承是指一个类&#xff08;子类&#xff09;通过继…
阅读更多...
java项目之网上租贸系统源码（springboot+mysql+vue）

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

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

协方差矩阵

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

spring boot controller放到那一层

在 Spring Boot 应用程序中&#xff0c;Controller 层通常被放置在应用程序的 表示层&#xff08;Presentation Layer&#xff09; 或 用户界面层&#xff08;UI Layer&#xff09; 中。Controller 层的主要职责是处理用户的 HTTP 请求&#xff0c;并将请求转发给服务层进行业务…
阅读更多...
计算机网络之---局域网

计算机网络之---局域网

什么叫局域网 局域网&#xff08;LAN&#xff0c;Local Area Network&#xff09; 是指在一个相对较小的区域内&#xff0c;如家庭、办公室、学校、企业等&#xff0c;连接多个计算机和设备的网络。局域网的特点是覆盖范围小、传输速度快、构建成本较低。 局域网的主要特点&…
阅读更多...
Spring Boot + Jasypt 实现application.yml 属性加密的快速示例

Spring Boot + Jasypt 实现application.yml 属性加密的快速示例

Jasypt（Java Simplified Encryption）是一个专为Java应用程序设计的开源加密库，旨在简化加密和解密流程，保护敏感数据如密码、API密钥等。 jasypt-spring-boot-starter允许开发者在Spring Boot应用中轻松地实现加密和解密功能。 本篇介绍使用 jasypt-spring-boot-starter 以…
阅读更多...
HarmonyOS开发：传参方式

HarmonyOS开发：传参方式

一、父子组件传参 1、父传子&#xff08;Prop方式&#xff09; 父组件代码 Entry Component struct ParentComponent {State parentMessage: string Hello from Parent;build() {Column() {ChildComponent({ message: this.parentMessage });}} } 子组件代码 Component s…
阅读更多...
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的全部命令…
阅读更多...
微信小程序中使用 TypeScript 定义组件时，Component 函数确实需要多个类型参数

微信小程序中使用 TypeScript 定义组件时，Component 函数确实需要多个类型参数

在微信小程序中使用 TypeScript 定义组件时&#xff0c;Component 函数确实需要多个类型参数&#xff0c;而不仅仅是一个。这些参数包括&#xff1a; Properties&#xff1a;组件的属性&#xff08;props&#xff09;类型。 Data&#xff1a;组件的内部数据类型。 Methods&am…
阅读更多...
我在广州学 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 &…
阅读更多...
我用Ai学Android Jetpack Compose之Button

我用Ai学Android Jetpack Compose之Button

答案来自 通义千问&#xff0c;代码同样需要到Android Studio里实践&#xff0c;才能学会。完整工程代码见文末。 我要学Button&#xff0c;麻烦介绍一下 当然可以&#xff01;Button 是 Jetpack Compose 中用于创建可点击按钮的 Composable 函数。它提供了丰富的配置选项来定…
阅读更多...
flutter 专题三十六 Flutter动态化框架Thresh

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

一、前言 移动端技术栈自诞生以来&#xff0c;其双端开发成本和发布效率一直广受诟病。为了解决这些问题&#xff0c;前端跨端技术一直在不断尝试&#xff0c;希望能一次开发、多端运行并且能做到快速发布。期间经历了多个技术发展阶段。 第一阶段&#xff1a;以H5为代表&…
阅读更多...
NodeJs 箭头函数：`()=＞{}` 和 `()=＞()` 的区别与使用场景

NodeJs 箭头函数：`()=＞{}` 和 `()=＞()` 的区别与使用场景

在 JavaScript 中&#xff0c;箭头函数&#xff08;Arrow Function&#xff09;是一种简洁的函数写法&#xff0c;它不仅可以减少代码量&#xff0c;还能避免 this 绑定的问题。然而&#xff0c;箭头函数有两种常见的写法&#xff1a;()>{} 和 ()>()。这两种写法虽然看起…
阅读更多...
缓存-Redis-缓存更新策略-主动更新策略-Cache Aside Pattern（全面 易理解）

缓存-Redis-缓存更新策略-主动更新策略-Cache Aside Pattern（全面 易理解）

**Cache-Aside Pattern&#xff08;旁路缓存模式&#xff09;**是一种广泛应用于缓存管理的设计模式&#xff0c;尤其在使用 Redis 作为缓存层时尤为常见。该模式通过在应用程序与缓存之间引入一个旁路&#xff0c;确保数据的一致性和高效性。本文将在之前讨论的 Redis 主动更新…
阅读更多...
最新文章

Copyright @ 2022~2023