提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
课程知识点
1. 实现星际编辑器
2. 创建粒子 1000， 在随机位置
3. 创建材质 PointsMaterial
4. Points() 接收
5. 放到gui 中调试 但是会发现调整size 等 属性 页面无变化
因此有两种方法 onChange() onFinishChange()
这个时候更改就会 将参数传到 generateGalaxy
同样有问题 增加可以 ，因为在数值增加 不断生成新的星系
数值缩小时候，但是没有消减
因此要在函数外部 创建geometry，position，material 这些变量
判断是否和之前相等 ，不相等则 dispose() 清除几何体缓存,材质缓存同时
删除这些点 scene.remove(points)
// 实现漩涡星系 思路
首先将所有粒子 放到一条直线上 ，x position[i3 + 0] = Math.random() * parameters.radius
要实现分支 % 取余操作
这样在循环中 就可以得到 branchAngle=0,1,2,0,1,2,0,1,2,0,1,2,
对应的 i =0,1,2,3,4,5,6,7,8,9
下面主要是数学的应用 通过更改数值 实现星系
一、代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as lil from 'lil-gui'
import { AdditiveBlending } from 'three'
/*
课程知识点
1. 实现星际编辑器
2. 创建粒子 1000， 在随机位置
3. 创建材质 PointsMaterial
4. Points() 接收
5. 放到gui 中调试 但是会发现调整size 等 属性 页面无变化
因此有两种方法 onChange() onFinishChange()
这个时候更改就会 将参数传到 generateGalaxy
同样有问题 增加可以 ，因为在数值增加 不断生成新的星系
数值缩小时候，但是没有消减
因此要在函数外部 创建geometry，position，material 这些变量
判断是否和之前相等 ，不相等则 dispose() 清除几何体缓存,材质缓存同时
删除这些点 scene.remove(points)
// 实现漩涡星系 思路
首先将所有粒子 放到一条直线上 ，x position[i3 + 0] = Math.random() * parameters.radius
要实现分支 % 取余操作
这样在循环中 就可以得到 branchAngle=0,1,2,0,1,2,0,1,2,0,1,2,
对应的 i =0,1,2,3,4,5,6,7,8,9
下面主要是数学的应用 通过更改数值 实现星系
*/
/**
* Base
*/
// Debug
const gui = new lil.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/*
* Galaxy 星系 Generator 编辑器
*/
const parameters = {}
parameters.count = 100000
parameters.size = 0.01
parameters.color = '#ffffff'
parameters.radius = 5 // 半径
parameters.branches = 3 // 分支
parameters.spin = 1 // 旋转
parameters.randomness = 0.2 // 随机值
parameters.randomnessPower = 3 //
parameters.insideColor = '#ff6030' //
parameters.outsideColor = '#1b3984'
let geometry = null
let points = null
let material = null
const generateGalaxy = () =>{
/*
* Destroy old galaxy
*/
if(points !== null){
geometry.dispose()
material.dispose()
scene.remove(points)
}
// Geometry
geometry = new THREE.BufferGeometry()
// 创建粒子 位置参数
const position = new Float32Array(parameters.count * 3)
const colors = new Float32Array(parameters.count * 3)
const colorInside = new THREE.Color(parameters.insideColor)
const colorOutside = new THREE.Color(parameters.outsideColor)
// 设置随机位置
for(let i=0;i<parameters.count;i++){
const i3 = i * 3
// position
const radius = Math.random() * parameters.radius
const sponAngle = radius * parameters.spin
const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2
const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
position[i3 + 0] = Math.cos(branchAngle + sponAngle) * radius + randomX
position[i3 + 1] = randomY
position[i3 + 2] = Math.sin(branchAngle + sponAngle) * radius + randomZ
// position[i3 + 0] = (Math.random() - 0.5) * 10 // x位置
// position[i3 + 1] = (Math.random() - 0.5) * 10 // y
// position[i3 + 2] = (Math.random() - 0.5) * 10 // z
// color
const mixedColor = colorInside.clone()
mixedColor.lerp(colorOutside,radius/parameters.radius)
colors[i3 + 0] = mixedColor.r
colors[i3 + 1] = mixedColor.g
colors[i3 + 2] = mixedColor.b
}
geometry.setAttribute(
'position',
new THREE.BufferAttribute(position,3)
)
geometry.setAttribute(
'color',
new THREE.BufferAttribute(colors,3)
)
// Material
material = new THREE.PointsMaterial({
// color:parameters.color,
size:parameters.size,
sizeAttenuation:true, // 衰减
depthWrite:false, // 深度缓冲区
blending: THREE.AdditiveBlending,
vertexColors:true
})
// material.vertexColors = true
/*
* Points
*/
points = new THREE.Points(
geometry,
material
)
scene.add(points)
}
gui.add(parameters, 'count').min(100).max(100000).step(100).onFinishChange(generateGalaxy)
gui.add(parameters, 'size').min(0.001).max(1).step(0.001).onFinishChange(generateGalaxy)
gui.add(parameters, 'radius').min(0.01).max(20).step(0.01).onFinishChange(generateGalaxy)
gui.add(parameters, 'branches').min(2).max(20).step(1).onFinishChange(generateGalaxy)
gui.add(parameters, 'spin').min(-5).max(5).step(0.001).onFinishChange(generateGalaxy)
gui.add(parameters, 'randomness').min(0).max(2).step(0.001).onFinishChange(generateGalaxy)
gui.add(parameters, 'randomnessPower').min(1).max(10).step(0.001).onFinishChange(generateGalaxy)
gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy)
gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy)
generateGalaxy()
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
scene.add(camera)
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()二、知识点
1.思路图
2.效果
总结
五一前看的，全被自己吃进肚子里了，想想怎么实现的一头雾水！还是要看之前代码，很烦...
