THREE.js:网页上的3D世界构建者

THREE.js:网页上的3D世界构建者

前言

THREE.js 是一个强大的基于 JavaScript 的库,它使得在网页上创建和展示三维图形变得异常简单。

通过封装复杂的 WebGL 技术,THREE.js 提供了一套丰富的 API,让开发者能够轻松地构建出令人印象深刻的3D场景。

官网地址:

THREE.js 官方文档

创建场景

Three.js 中,Scene 对象是整个三维场景的容器。

它就像一张白纸,你可以在其上绘制任何三维对象,如几何体、灯光或其他对象。

每个 Scene 对象都是一个全局和基本的结构,用于容纳场景中的所有元素,并通过相机从特定视角渲染整个场景,最终得到一个完整的3D图像。

javascript 复制代码
import * as THREE from 'three'; 
const scene = new THREE.Scene();

添加相机

在 Three.js 中,相机是观察场景的关键。常用的相机类型有两种:

  • PerspectiveCamera(透视相机):模拟人眼的视觉效果,物体的大小随距离变化,适用于需要表现深度感的场景。
  • OrthographicCamera(正交相机):不考虑物体的距离,所有物体在画面中保持一致的大小,适合需要准确展示比例的场景。
javascript 复制代码
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 或者使用正交相机
// const camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 1000);
scene.add(camera);

添加渲染器

渲染器是 Three.js 中用于将三维场景转换为二维图像的关键组件。

WebGLRendererThree.js 中常用的渲染器,它利用 WebGL 技术在浏览器中实现高性能的图形绘制。

javascript 复制代码
const renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建OrbitControls

OrbitControls,这是 THREE.js 提供的一个用于实现相机控制的类。

它允许用户通过鼠标或触摸输入来旋转、缩放和平移相机。

javascript 复制代码
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果,更平滑的交互
controls.dampingFactor = 0.05; // 阻尼系数

渲染场景

为了让场景动起来,我们使用 requestAnimationFrame 方法。这是一个浏览器提供的 API,用于创建平滑动画。它通过请求浏览器在下一个重绘周期之前调用指定的回调函数,实现动画的逐帧更新。

javascript 复制代码
function animate() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
}
animate();

添加物体

在场景中添加物体,我们通常使用几何体(Geometry)和材质(Material)来创建网格(Mesh)。

以下是一个添加立方体的示例:

javascript 复制代码
const geometry = new THREE.BoxGeometry(1, 1, 1); 
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material); 
scene.add(cube);

设置摄像机位置

为了让立方体出现在视野中,我们需要设置相机的位置,并使其朝向场景的中心。

javascript 复制代码
camera.position.set(0, 2, 5);
camera.lookAt(scene.position);

实现效果

总结

通过上述步骤,我们已经在 THREE.js 中创建了一个基本的3D场景,其中包括一个立方体和必要的相机设置。

这只是 THREE.js 功能的一小部分,它还支持更复杂的功能,如光照、阴影、纹理映射等,使得开发者能够创造出更加丰富和动态的三维世界。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
LKID体5 分钟前
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作(三)
开发语言·python·neo4j
小屁孩大帅-杨一凡6 分钟前
Python-flet实现个人视频播放器
开发语言·python·音视频
算家云9 分钟前
快速识别模型:simple_ocr,部署教程
开发语言·人工智能·python·ocr·数字识别·检测模型·英文符号识别
Thomas_Cai20 分钟前
Python后端flask框架接收zip压缩包方法
开发语言·python·flask
霍先生的虚拟宇宙网络22 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing24 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
彪82525 分钟前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
魔道不误砍柴功31 分钟前
实际开发中的协变与逆变案例:数据处理流水线
java·开发语言
鲤籽鲲39 分钟前
C# MethodTimer.Fody 使用详解
开发语言·c#·mfc
亚图跨际42 分钟前
Python和R荧光分光光度法
开发语言·python·r语言·荧光分光光度法