mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 08:29:30 -06:00
Add prettier config, format codebase
This commit is contained in:
David Haz
@@ -3,19 +3,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { degToRad } from 'three/src/math/MathUtils.js'
|
||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import * as THREE from 'three';
|
||||
import { degToRad } from 'three/src/math/MathUtils.js';
|
||||
|
||||
interface BeamsProps {
|
||||
beamWidth?: number
|
||||
beamHeight?: number
|
||||
beamNumber?: number
|
||||
lightColor?: string
|
||||
speed?: number
|
||||
noiseIntensity?: number
|
||||
scale?: number
|
||||
rotation?: number
|
||||
beamWidth?: number;
|
||||
beamHeight?: number;
|
||||
beamNumber?: number;
|
||||
lightColor?: string;
|
||||
speed?: number;
|
||||
noiseIntensity?: number;
|
||||
scale?: number;
|
||||
rotation?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<BeamsProps>(), {
|
||||
@@ -27,41 +27,41 @@ const props = withDefaults(defineProps<BeamsProps>(), {
|
||||
noiseIntensity: 1.75,
|
||||
scale: 0.2,
|
||||
rotation: 0
|
||||
})
|
||||
});
|
||||
|
||||
const containerRef = ref<HTMLDivElement>()
|
||||
const containerRef = ref<HTMLDivElement>();
|
||||
|
||||
let renderer: THREE.WebGLRenderer | null = null
|
||||
let scene: THREE.Scene | null = null
|
||||
let camera: THREE.PerspectiveCamera | null = null
|
||||
let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null
|
||||
let directionalLight: THREE.DirectionalLight | null = null
|
||||
let ambientLight: THREE.AmbientLight | null = null
|
||||
let animationId: number | null = null
|
||||
let renderer: THREE.WebGLRenderer | null = null;
|
||||
let scene: THREE.Scene | null = null;
|
||||
let camera: THREE.PerspectiveCamera | null = null;
|
||||
let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null;
|
||||
let directionalLight: THREE.DirectionalLight | null = null;
|
||||
let ambientLight: THREE.AmbientLight | null = null;
|
||||
let animationId: number | null = null;
|
||||
|
||||
type UniformValue = THREE.IUniform<unknown> | unknown
|
||||
type UniformValue = THREE.IUniform<unknown> | unknown;
|
||||
|
||||
interface ExtendMaterialConfig {
|
||||
header: string
|
||||
vertexHeader?: string
|
||||
fragmentHeader?: string
|
||||
material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean }
|
||||
uniforms?: Record<string, UniformValue>
|
||||
vertex?: Record<string, string>
|
||||
fragment?: Record<string, string>
|
||||
header: string;
|
||||
vertexHeader?: string;
|
||||
fragmentHeader?: string;
|
||||
material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean };
|
||||
uniforms?: Record<string, UniformValue>;
|
||||
vertex?: Record<string, string>;
|
||||
fragment?: Record<string, string>;
|
||||
}
|
||||
|
||||
type ShaderWithDefines = THREE.ShaderLibShader & {
|
||||
defines?: Record<string, string | number | boolean>
|
||||
}
|
||||
defines?: Record<string, string | number | boolean>;
|
||||
};
|
||||
|
||||
const hexToNormalizedRGB = (hex: string): [number, number, number] => {
|
||||
const clean = hex.replace('#', '')
|
||||
const r = parseInt(clean.substring(0, 2), 16)
|
||||
const g = parseInt(clean.substring(2, 4), 16)
|
||||
const b = parseInt(clean.substring(4, 6), 16)
|
||||
return [r / 255, g / 255, b / 255]
|
||||
}
|
||||
const clean = hex.replace('#', '');
|
||||
const r = parseInt(clean.substring(0, 2), 16);
|
||||
const g = parseInt(clean.substring(2, 4), 16);
|
||||
const b = parseInt(clean.substring(4, 6), 16);
|
||||
return [r / 255, g / 255, b / 255];
|
||||
};
|
||||
|
||||
const noise = `
|
||||
float random (in vec2 st) {
|
||||
@@ -138,53 +138,47 @@ float cnoise(vec3 P){
|
||||
float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
|
||||
return 2.2 * n_xyz;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
function extendMaterial<T extends THREE.Material = THREE.Material>(
|
||||
BaseMaterial: new (params?: THREE.MaterialParameters) => T,
|
||||
cfg: ExtendMaterialConfig
|
||||
): THREE.ShaderMaterial {
|
||||
const physical = THREE.ShaderLib.physical as ShaderWithDefines
|
||||
const {
|
||||
vertexShader: baseVert,
|
||||
fragmentShader: baseFrag,
|
||||
uniforms: baseUniforms,
|
||||
} = physical
|
||||
const baseDefines = physical.defines ?? {}
|
||||
const physical = THREE.ShaderLib.physical as ShaderWithDefines;
|
||||
const { vertexShader: baseVert, fragmentShader: baseFrag, uniforms: baseUniforms } = physical;
|
||||
const baseDefines = physical.defines ?? {};
|
||||
|
||||
const uniforms: Record<string, THREE.IUniform> =
|
||||
THREE.UniformsUtils.clone(baseUniforms)
|
||||
const uniforms: Record<string, THREE.IUniform> = THREE.UniformsUtils.clone(baseUniforms);
|
||||
|
||||
const defaults = new BaseMaterial(cfg.material || {}) as T & {
|
||||
color?: THREE.Color
|
||||
roughness?: number
|
||||
metalness?: number
|
||||
envMap?: THREE.Texture
|
||||
envMapIntensity?: number
|
||||
}
|
||||
color?: THREE.Color;
|
||||
roughness?: number;
|
||||
metalness?: number;
|
||||
envMap?: THREE.Texture;
|
||||
envMapIntensity?: number;
|
||||
};
|
||||
|
||||
if (defaults.color) uniforms.diffuse.value = defaults.color
|
||||
if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness
|
||||
if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness
|
||||
if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap
|
||||
if ('envMapIntensity' in defaults)
|
||||
uniforms.envMapIntensity.value = defaults.envMapIntensity
|
||||
if (defaults.color) uniforms.diffuse.value = defaults.color;
|
||||
if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness;
|
||||
if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness;
|
||||
if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap;
|
||||
if ('envMapIntensity' in defaults) uniforms.envMapIntensity.value = defaults.envMapIntensity;
|
||||
|
||||
Object.entries(cfg.uniforms ?? {}).forEach(([key, u]) => {
|
||||
uniforms[key] =
|
||||
u !== null && typeof u === 'object' && 'value' in u
|
||||
? (u as THREE.IUniform<unknown>)
|
||||
: ({ value: u } as THREE.IUniform<unknown>)
|
||||
})
|
||||
: ({ value: u } as THREE.IUniform<unknown>);
|
||||
});
|
||||
|
||||
let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`
|
||||
let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`
|
||||
let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`;
|
||||
let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`;
|
||||
|
||||
for (const [inc, code] of Object.entries(cfg.vertex ?? {})) {
|
||||
vert = vert.replace(inc, `${inc}\n${code}`)
|
||||
vert = vert.replace(inc, `${inc}\n${code}`);
|
||||
}
|
||||
for (const [inc, code] of Object.entries(cfg.fragment ?? {})) {
|
||||
frag = frag.replace(inc, `${inc}\n${code}`)
|
||||
frag = frag.replace(inc, `${inc}\n${code}`);
|
||||
}
|
||||
|
||||
const mat = new THREE.ShaderMaterial({
|
||||
@@ -193,10 +187,10 @@ function extendMaterial<T extends THREE.Material = THREE.Material>(
|
||||
vertexShader: vert,
|
||||
fragmentShader: frag,
|
||||
lights: true,
|
||||
fog: !!cfg.material?.fog,
|
||||
})
|
||||
fog: !!cfg.material?.fog
|
||||
});
|
||||
|
||||
return mat
|
||||
return mat;
|
||||
}
|
||||
|
||||
function createStackedPlanesBufferGeometry(
|
||||
@@ -206,54 +200,51 @@ function createStackedPlanesBufferGeometry(
|
||||
spacing: number,
|
||||
heightSegments: number
|
||||
): THREE.BufferGeometry {
|
||||
const geometry = new THREE.BufferGeometry()
|
||||
const numVertices = n * (heightSegments + 1) * 2
|
||||
const numFaces = n * heightSegments * 2
|
||||
const positions = new Float32Array(numVertices * 3)
|
||||
const indices = new Uint32Array(numFaces * 3)
|
||||
const uvs = new Float32Array(numVertices * 2)
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const numVertices = n * (heightSegments + 1) * 2;
|
||||
const numFaces = n * heightSegments * 2;
|
||||
const positions = new Float32Array(numVertices * 3);
|
||||
const indices = new Uint32Array(numFaces * 3);
|
||||
const uvs = new Float32Array(numVertices * 2);
|
||||
|
||||
let vertexOffset = 0
|
||||
let indexOffset = 0
|
||||
let uvOffset = 0
|
||||
const totalWidth = n * width + (n - 1) * spacing
|
||||
const xOffsetBase = -totalWidth / 2
|
||||
let vertexOffset = 0;
|
||||
let indexOffset = 0;
|
||||
let uvOffset = 0;
|
||||
const totalWidth = n * width + (n - 1) * spacing;
|
||||
const xOffsetBase = -totalWidth / 2;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const xOffset = xOffsetBase + i * (width + spacing)
|
||||
const uvXOffset = Math.random() * 300
|
||||
const uvYOffset = Math.random() * 300
|
||||
const xOffset = xOffsetBase + i * (width + spacing);
|
||||
const uvXOffset = Math.random() * 300;
|
||||
const uvYOffset = Math.random() * 300;
|
||||
|
||||
for (let j = 0; j <= heightSegments; j++) {
|
||||
const y = height * (j / heightSegments - 0.5)
|
||||
const v0 = [xOffset, y, 0]
|
||||
const v1 = [xOffset + width, y, 0]
|
||||
positions.set([...v0, ...v1], vertexOffset * 3)
|
||||
const y = height * (j / heightSegments - 0.5);
|
||||
const v0 = [xOffset, y, 0];
|
||||
const v1 = [xOffset + width, y, 0];
|
||||
positions.set([...v0, ...v1], vertexOffset * 3);
|
||||
|
||||
const uvY = j / heightSegments
|
||||
uvs.set(
|
||||
[uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset],
|
||||
uvOffset
|
||||
)
|
||||
const uvY = j / heightSegments;
|
||||
uvs.set([uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset], uvOffset);
|
||||
|
||||
if (j < heightSegments) {
|
||||
const a = vertexOffset,
|
||||
b = vertexOffset + 1,
|
||||
c = vertexOffset + 2,
|
||||
d = vertexOffset + 3
|
||||
indices.set([a, b, c, c, b, d], indexOffset)
|
||||
indexOffset += 6
|
||||
d = vertexOffset + 3;
|
||||
indices.set([a, b, c, c, b, d], indexOffset);
|
||||
indexOffset += 6;
|
||||
}
|
||||
vertexOffset += 2
|
||||
uvOffset += 4
|
||||
vertexOffset += 2;
|
||||
uvOffset += 4;
|
||||
}
|
||||
}
|
||||
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
|
||||
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1))
|
||||
geometry.computeVertexNormals()
|
||||
return geometry
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
|
||||
geometry.computeVertexNormals();
|
||||
return geometry;
|
||||
}
|
||||
|
||||
const beamMaterial = computed(() =>
|
||||
@@ -290,12 +281,12 @@ const beamMaterial = computed(() =>
|
||||
fragmentHeader: '',
|
||||
vertex: {
|
||||
'#include <begin_vertex>': `transformed.z += getPos(transformed.xyz);`,
|
||||
'#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`,
|
||||
'#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`
|
||||
},
|
||||
fragment: {
|
||||
'#include <dithering_fragment>': `
|
||||
float randomNoise = noise(gl_FragCoord.xy);
|
||||
gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`,
|
||||
gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`
|
||||
},
|
||||
material: { fog: true },
|
||||
uniforms: {
|
||||
@@ -306,127 +297,120 @@ const beamMaterial = computed(() =>
|
||||
uSpeed: { shared: true, mixed: true, linked: true, value: props.speed },
|
||||
envMapIntensity: 10,
|
||||
uNoiseIntensity: props.noiseIntensity,
|
||||
uScale: props.scale,
|
||||
},
|
||||
uScale: props.scale
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
const initThreeJS = () => {
|
||||
if (!containerRef.value) return
|
||||
if (!containerRef.value) return;
|
||||
|
||||
cleanup()
|
||||
cleanup();
|
||||
|
||||
const container = containerRef.value;
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.setClearColor(0x000000, 1);
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
|
||||
camera.position.set(0, 0, 20);
|
||||
|
||||
const geometry = createStackedPlanesBufferGeometry(props.beamNumber, props.beamWidth, props.beamHeight, 0, 100);
|
||||
|
||||
const material = beamMaterial.value;
|
||||
beamMesh = new THREE.Mesh(geometry, material);
|
||||
|
||||
const group = new THREE.Group();
|
||||
group.rotation.z = degToRad(props.rotation);
|
||||
group.add(beamMesh);
|
||||
scene.add(group);
|
||||
|
||||
directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1);
|
||||
directionalLight.position.set(0, 3, 10);
|
||||
const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera;
|
||||
shadowCamera.top = 24;
|
||||
shadowCamera.bottom = -24;
|
||||
shadowCamera.left = -24;
|
||||
shadowCamera.right = 24;
|
||||
shadowCamera.far = 64;
|
||||
directionalLight.shadow.bias = -0.004;
|
||||
scene.add(directionalLight);
|
||||
|
||||
ambientLight = new THREE.AmbientLight(0xffffff, 1);
|
||||
scene.add(ambientLight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
const container = containerRef.value
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
renderer.setClearColor(0x000000, 1)
|
||||
|
||||
scene = new THREE.Scene()
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000)
|
||||
camera.position.set(0, 0, 20)
|
||||
|
||||
const geometry = createStackedPlanesBufferGeometry(
|
||||
props.beamNumber,
|
||||
props.beamWidth,
|
||||
props.beamHeight,
|
||||
0,
|
||||
100
|
||||
)
|
||||
|
||||
const material = beamMaterial.value
|
||||
beamMesh = new THREE.Mesh(geometry, material)
|
||||
|
||||
const group = new THREE.Group()
|
||||
group.rotation.z = degToRad(props.rotation)
|
||||
group.add(beamMesh)
|
||||
scene.add(group)
|
||||
|
||||
directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1)
|
||||
directionalLight.position.set(0, 3, 10)
|
||||
const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera
|
||||
shadowCamera.top = 24
|
||||
shadowCamera.bottom = -24
|
||||
shadowCamera.left = -24
|
||||
shadowCamera.right = 24
|
||||
shadowCamera.far = 64
|
||||
directionalLight.shadow.bias = -0.004
|
||||
scene.add(directionalLight)
|
||||
|
||||
ambientLight = new THREE.AmbientLight(0xffffff, 1)
|
||||
scene.add(ambientLight)
|
||||
|
||||
container.appendChild(renderer.domElement)
|
||||
|
||||
const resize = () => {
|
||||
if (!container || !renderer || !camera) return
|
||||
|
||||
const width = container.offsetWidth
|
||||
const height = container.offsetHeight
|
||||
|
||||
renderer.setSize(width, height)
|
||||
camera.aspect = width / height
|
||||
camera.updateProjectionMatrix()
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(resize)
|
||||
resizeObserver.observe(container)
|
||||
|
||||
resize()
|
||||
|
||||
if (!container || !renderer || !camera) return;
|
||||
|
||||
const width = container.offsetWidth;
|
||||
const height = container.offsetHeight;
|
||||
|
||||
renderer.setSize(width, height);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
};
|
||||
|
||||
const resizeObserver = new ResizeObserver(resize);
|
||||
resizeObserver.observe(container);
|
||||
|
||||
resize();
|
||||
|
||||
const animate = () => {
|
||||
animationId = requestAnimationFrame(animate)
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
|
||||
if (beamMesh && beamMesh.material) {
|
||||
beamMesh.material.uniforms.time.value += 0.1 * 0.016
|
||||
beamMesh.material.uniforms.time.value += 0.1 * 0.016;
|
||||
}
|
||||
|
||||
|
||||
if (renderer && scene && camera) {
|
||||
renderer.render(scene, camera)
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate)
|
||||
|
||||
;(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver;
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId)
|
||||
animationId = null
|
||||
cancelAnimationFrame(animationId);
|
||||
animationId = null;
|
||||
}
|
||||
|
||||
|
||||
if (containerRef.value) {
|
||||
const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver }
|
||||
|
||||
const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver };
|
||||
|
||||
if (container._resizeObserver) {
|
||||
container._resizeObserver.disconnect()
|
||||
delete container._resizeObserver
|
||||
container._resizeObserver.disconnect();
|
||||
delete container._resizeObserver;
|
||||
}
|
||||
|
||||
|
||||
if (renderer && renderer.domElement.parentNode === container) {
|
||||
container.removeChild(renderer.domElement)
|
||||
container.removeChild(renderer.domElement);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (beamMesh) {
|
||||
if (beamMesh.geometry) beamMesh.geometry.dispose()
|
||||
if (beamMesh.material) beamMesh.material.dispose()
|
||||
beamMesh = null
|
||||
if (beamMesh.geometry) beamMesh.geometry.dispose();
|
||||
if (beamMesh.material) beamMesh.material.dispose();
|
||||
beamMesh = null;
|
||||
}
|
||||
|
||||
|
||||
if (renderer) {
|
||||
renderer.dispose()
|
||||
renderer = null
|
||||
renderer.dispose();
|
||||
renderer = null;
|
||||
}
|
||||
|
||||
scene = null
|
||||
camera = null
|
||||
directionalLight = null
|
||||
ambientLight = null
|
||||
}
|
||||
|
||||
scene = null;
|
||||
camera = null;
|
||||
directionalLight = null;
|
||||
ambientLight = null;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [
|
||||
@@ -437,19 +421,19 @@ watch(
|
||||
props.speed,
|
||||
props.noiseIntensity,
|
||||
props.scale,
|
||||
props.rotation,
|
||||
props.rotation
|
||||
],
|
||||
() => {
|
||||
initThreeJS()
|
||||
initThreeJS();
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
initThreeJS()
|
||||
})
|
||||
initThreeJS();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup()
|
||||
})
|
||||
cleanup();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user