网站备案容易吗,公司网络营销策划书,wordpress插件dedecms,辽宁建设工程信息系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…
系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 OrbitControls Three.js 快速入门教程【七】常见几何体类型 文章目录 系列文章目录一、Three.js 是什么二、Three.js 应用场景三、环境搭建两种方式任选四、核心概念1. 场景Scene2. 相机Camera3.几何体Geometry4、材质Material5. 网格Mesh6. 渲染器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直连适合测试或新手
!-- 在head中引入 --
script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r162/three.min.js/script/script方式二npm安装适合项目开发
npm install three// 使用时导入
import * as THREE from three;四、核心概念 在Three.js中创建一个最基本的3D场景需要六个核心要素场景Scene、相机Camera几何体Geometry、材质Material、网格Mesh最后通过渲染器WebGLRenderer将场景和相机的信息渲染到网页中并通过动画循环实现持续更新形成动态3D效果。
1. 场景Scene 作用3D 世界的容器所有物体、光源、相机的载体所有要在屏幕上显示的元素都需要添加到场景中。 // 创建一个场景
const scene new THREE.Scene();
//通过scene.add(元素)添加元素
2. 相机Camera 作用决定从哪个角度观察场景中的对象就像现实世界中摄影师使用的相机一样 相机分为2种类型透视相机、正交相机 透视相机模拟人眼的视觉效果远处的物体看起来比近处的物体小具有透视效果。 正交相机物体的大小不会随着距离的变化而改变常用于 2D 游戏或 UI 设计。 3D开发场景中透视相机用的比较多入门掌握透视相机即可。
透视相机PerspectiveCamera
// 创建一个透视相机
const camera new THREE.PerspectiveCamera(75, // 视场角FOVwindow.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面3000 // 远裁剪面
);//设置相机位置
camera.position.set(100, 100, 100);
3.几何体Geometry 作用定义了 物体的形状例如长方体、球体、圆柱体等。常用内置几何体 BoxGeometry长方体
SphereGeometry球体
CylinderGeometry圆柱体 // 创建一个立方体几何体
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高光材质受光影响面有高光反射效果。
// 创建一个基础材质
const material new THREE.MeshBasicMaterial({ color: 0x000000 });5. 网格Mesh 几何体 材质 网格网格是几何体和材质的组合它将几何体的形状和材质的外观结合起来形成一个完整的 3D 对象物体。创建网格后需要将其添加到场景中才能显示。 // 创建立方体宽高深
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。 // 创建一个 WebGL 渲染器
const renderer new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);五、牛刀小试 通过上面的介绍我们了解了three.js核心概念和基本的使用方式下面用代码来演示一个简单的3d案例——实现一个正方体3D效果 代码示例
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();运行效果
说明上述示例中我们引入了OrbitControls控制器 OrbitControls 是一个用于实现交互式场景相机控制的工具库。它允许用户通过鼠标或触摸屏直接操作 3D 场景的观察视角如同在轨道上环绕目标物体一般常用于提升 Web 3D 应用的交互体验。代码结尾通过requestAnimationFrame递归形式循环调用animate函数达到页面持续刷新效果。在 Three.js 开发中几乎所有的动态场景如旋转模型、交互操作、自动动画都需要通过 requestAnimationFrame 驱动持续渲染。
总结 通过本篇教程我们认识了什么是Three.js和Three.js应用场景共同探索了Three.js的核心概念与基础用法。从构建场景Scene、相机Camera到渲染器Renderer的铁三角架构再到几何体Geometry、材质Material与网格Mesh的有机结合至此你已经了解并掌握了创建最基础三维场景的核心工具链。 更多three.js入门知识点请关注该系列教程后续的更新。
