-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrand.html
157 lines (142 loc) · 5.86 KB
/
brand.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enhanced Star Guitar Inspired Visualizer</title>
<style>
html, body {
margin: 0;
overflow: hidden;
height: 100%;
background: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<!-- Include Three.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.js"></script>
<script>
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 10, 200);
// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);
camera.rotation.x = -0.05;
// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffddaa, 0.8);
directionalLight.position.set(0, 50, -50);
scene.add(directionalLight);
// Gradient Sky
const skyGeo = new THREE.SphereGeometry(500, 32, 15);
const skyMat = new THREE.ShaderMaterial({
vertexShader: `
varying vec2 vUV;
void main() {
vUV = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
varying vec2 vUV;
void main() {
vec3 skyColor = mix(vec3(0.1, 0.2, 0.5), vec3(0.8, 0.9, 1.0), vUV.y);
gl_FragColor = vec4( skyColor, 1.0 );
}
`,
side: THREE.BackSide
});
const sky = new THREE.Mesh(skyGeo, skyMat);
scene.add(sky);
// Ground plane
const groundGeo = new THREE.PlaneGeometry(1000, 1000);
const groundMat = new THREE.MeshLambertMaterial({ color: 0x555555 });
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -1.5;
scene.add(ground);
// Function to create procedural elements
const scenery = [];
function createElement(type, x, z) {
let element;
const scaleFactor = Math.random() * 1.5 + 2;
switch (type) {
case 'building':
element = new THREE.Mesh(new THREE.BoxGeometry(1, scaleFactor, 1), new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
break;
case 'tree':
const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 1), new THREE.MeshLambertMaterial({ color: 0x8B4513 }));
const leaves = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1.5, 8), new THREE.MeshLambertMaterial({ color: 0x228B22 }));
leaves.position.set(0, 0.5, 0);
element = new THREE.Group();
element.add(trunk);
element.add(leaves);
break;
case 'pole':
element = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 5), new THREE.MeshLambertMaterial({ color: 0xaaaaaa }));
break;
default:
element = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
break;
}
element.position.set(x, 0, z);
scenery.push(element);
scene.add(element);
}
// Populate scenery with varied elements
for (let i = 0; i < 100; i++) {
const z = -Math.random() * 300;
const side = Math.random() > 0.5 ? 1 : -1;
const x = side * (Math.random() * 10 + 5);
const types = ['building', 'tree', 'pole'];
const randomType = types[Math.floor(Math.random() * types.length)];
createElement(randomType, x, z);
}
// Audio setup
let analyser;
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioSource = audioContext.createMediaStreamSource(stream);
analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
audioSource.connect(analyser);
}).catch((err) => {
console.error('Audio input error: ', err);
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
let bass = 0;
if (analyser) {
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
bass = dataArray.slice(0, 10).reduce((a, b) => a + b, 0) / 10;
}
const speed = 0.5 + bass / 100;
scenery.forEach((obj) => {
obj.position.z += speed;
if (obj.position.z > 5) {
obj.position.z -= 300;
obj.position.x = (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 10 + 5);
}
});
renderer.render(scene, camera);
}
animate();
// Handle window resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>