个人简介
👀个人主页: 前端杂货铺
🙋♂️学习方向: 主攻前端方向,也会涉及到服务端
📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招)
🚀未来打算: 为中国的工业软件事业效力n年
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js 🍒Three.js
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享&商务合作,快加入进来吧
Three.js 系列文章目录
Three.js 专栏 | 参考链接 |
---|---|
Three.js 入门案例 | 程序人生——与足球共舞的火柴人 |
Three.js 入门(一) | 创建第一个场景和物体(轨道控制器、坐标轴辅助器…) |
Three.js 入门(二) | 处理动画、尺寸自适应、双击进入/退出全屏 |
【使用 Three.js 实现的效果】
一、应用图形用户界面更改变量(GUI)
简介:图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。
终端键入如下命令,安装 dat.gui
npm install --save dat.gui
导入 gui,创建 gui 实例,修改代码如下:
// 导入 dat.gui
import * as dat from "dat.gui"
.......
// 创建 gui 实例
const gui = new dat.GUI()
// 在 x 轴移动(最小0,最大4,步数0.01,设置名字,改变时输出,完全停下来的时候也输出)
gui.add(cube.position, "x").min(0).max(4).step(0.01).name("沿x轴移动").onChange((value) => {
console.log("值被修改了:", value)
}).onFinishChange((value) => {
console.log("完全停下来:", value)
})
接下来,深入了解一下 gui,完成修改物体颜色,显示/隐藏物体,让物体移动,以及添加文件夹显示边线的功能
......
const params = {
// 修改物体的颜色
color: "#ffff00",
// 让立方体运动起来(2s移动到位置4),往返运动,无限循环
fn: () => {
gsap.to(cube.position, {
x: 4,
duration: 2,
yoyo: true,
repeat: -1
})
}
}
// 改变物体颜色
gui.addColor(params, "color").onChange((value) => {
cube.material.color.set(value)
})
// 设置选项框(显示/隐藏物体)
gui.add(cube, "visible").name('显示/隐藏物体')
// 设置按钮点击触发某个事件
gui.add(params, 'fn').name('立方体运动')
// 设置文件夹
let folder = gui.addFolder('设置立方体')
// 显示实体/边线
folder.add(cube.material, 'wireframe')
【GUI 用户界面更改变量】
二、BufferGeometry 设置顶点创建矩形
通过六个点,渲染出一个矩形
把原先 cube 相关内容删掉,我们通过创建六个点来渲染出一个矩形
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 创建场景
const scene = new THREE.Scene()
// 创建相机对象(角度,宽高比,近端,远端)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机的位置(x,y,z)
camera.position.set(0, 0, 10)
// 场景里面添加相机
scene.add(camera)
// 添加物体
// 创建矩形
const geometry = new THREE.BufferGeometry()
// 设置顶点
const vertices = new Float32Array([
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
])
// 设置每三个值为一个坐标
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
// 创建材质
const material = new THREE.MeshBasicMaterial({
color: 0xffff00
})
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(geometry, material)
// 将物体添加到场景中
scene.add(mesh)
console.log(mesh)
// 修改物体的颜色
const params = { color: "#ffff00" }
// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer)
// 将 webgl 渲染的 canvas 内容添加到 body
document.body.appendChild(renderer.domElement)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()
controls.enableDamping = true
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(4)
// 添加到场景中
scene.add(axesHelper)
// 渲染函数
function render() {
controls.update()
renderer.render(scene, camera)
// 请求动画帧-下一帧的时候重新渲染
requestAnimationFrame(render)
}
render()
三、随机生成多个三角形
在上文知识的基础上,我们来实现 随机生成多个不同颜色不同大小的三角形
我们随机生成 45 个随机颜色的三角形,每xyz三个坐标确定一个点,每三个点确定一个三角形,随机生成它们
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControl } from 'three/examples/jsm/controls/OrbitControls'
// 创建场景
const scene = new THREE.Scene()
// 创建相机对象(角度,宽高比,近端,远端)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机的位置(x,y,z)
camera.position.set(0, 0, 10)
// 场景里面添加相机
scene.add(camera)
// 添加物体
// 创建三角形
for (let i = 0; i < 45; i++) {
// 每个三角形,需要3个顶点,每个顶点需要3个值
const geometry = new THREE.BufferGeometry()
// 32 位的浮点数型数组,设置顶点
const positionArray = new Float32Array(9)
for (let j = 0; j < 9; j++) {
positionArray[j] = Math.random() * 10 - 5
}
// 设置每三个值为一个坐标
geometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3))
// 随机生成颜色
let color = new THREE.Color(Math.random(), Math.random(), Math.random())
// 创建材质(设置颜色,透明度)
const material = new THREE.MeshBasicMaterial({
color: color,
// 设置透明度
transparent: true,
opacity: 0.6
})
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(geometry, material)
// 将物体添加到场景中
scene.add(mesh)
console.log(mesh)
}
// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer)
// 将 webgl 渲染的 canvas 内容添加到 body
document.body.appendChild(renderer.domElement)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()
controls.enableDamping = true
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
// 添加到场景中
scene.add(axesHelper)
// 渲染函数
function render() {
controls.update()
renderer.render(scene, camera)
// 请求动画帧-下一帧的时候重新渲染
requestAnimationFrame(render)
}
render()
// 监听画面的变化,更新渲染画面
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix()
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight)
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
【随机生成多个随机颜色的三角形】