three-js-designs/orbit.html at main · void032/three-js-designs · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Three.js Metallic Ball</title>
    <style>
      body {
        margin: 0;
        width: 100%;
        overflow: hidden;
        background-color: black;
      }
      canvas {
        display: block;
      }
    </style>
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.128.0/build/three.module.js",
          "three/examples/jsm/": "https://unpkg.com/three@0.128.0/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.SphereGeometry(2, 32, 32);
      const material = new THREE.MeshStandardMaterial({
        color: 0xffffff,
        metalness: 1,
        roughness: 0.2,
      });

      const particleCount = 100;
      const spreadDistance = 1000;
      const orbitRadius = 80;

      const particles = [];

      for (let i = 0; i < particleCount; i++) {
        const particle = new THREE.Mesh(geometry, material);
        const angle = (i / particleCount) * Math.PI * 2;
        const x = Math.cos(angle) * orbitRadius;
        const z = Math.sin(angle) * orbitRadius;
        particle.position.set(x, 0, z);
        particles.push(particle);
        scene.add(particle);
      }
      const sphere = new THREE.Mesh(geometry, material);
      scene.add(sphere);

      const light = new THREE.DirectionalLight(0xffffff, 2);
      light.position.set(0, 1, 10);
      scene.add(light);

      const lensFlareTexture = new THREE.TextureLoader().load('texture/sun.png'); // Replace with the path to your lens flare texture
      const lensFlare = new THREE.Sprite(new THREE.SpriteMaterial({ map: lensFlareTexture }));
      lensFlare.scale.set(50, 50, 1); // Adjust the scale to control the size of the lens flare
      light.add(lensFlare);

      camera.position.z = 100;

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.05;
      controls.enableZoom = true;

      let audioContext;
      let audioSource;
      let audioAnalyser;
      let dataArray;

      function initAudio() {
        // Create the Web Audio API context
        audioContext = new (window.AudioContext || window.webkitAudioContext)();

        // Load and play the music
        const audioElement = new Audio();
        audioElement.src = 'music/superspacy-atmosphere-106826.mp3'; // Replace with your audio link
        audioElement.loop = true;
        audioElement.crossOrigin = 'anonymous';
        audioSource = audioContext.createMediaElementSource(audioElement);
        audioSource.connect(audioContext.destination);

        // Analyze the audio data and update the scene based on the music
        audioAnalyser = audioContext.createAnalyser();
        audioSource.connect(audioAnalyser);

        const bufferLength = audioAnalyser.frequencyBinCount;
        dataArray = new Uint8Array(bufferLength);

        audioElement.play();
      }

      function updateSceneWithAudio() {
        // Update the audio data
        if (audioAnalyser) {
          audioAnalyser.getByteFrequencyData(dataArray);

          // Perform updates to the scene based on the audio data
          if (dataArray) {
            const frequencyAverage = getAverage(dataArray);
            // Example: Scale the sphere based on the frequency average
            const scale = 1 + frequencyAverage / 128; // Adjust the scaling factor as needed
            sphere.scale.set(scale, scale, scale);
          }
        }
      }

      function getAverage(array) {
        let sum = 0;
        for (let i = 0; i < array.length; i++) {
          sum += array[i];
        }
        return sum / array.length;
      }

      function animate() {
        requestAnimationFrame(animate);

        controls.update();
        //scene.rotation.z += 0.005;
        light.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.005);
        updateSceneWithAudio();
        updateParticles();
        renderer.render(scene, camera);
      }
      function updateParticles() {
        const time = Date.now() * 0.001; // Time-based animation
        for (let i = 0; i < particles.length; i++) {
          const particle = particles[i];
          const angle = time * (i / particleCount) * Math.PI * 2;
          const x = Math.cos(angle) * orbitRadius;
          const z = Math.sin(angle) * orbitRadius;
          particle.position.set(x, 0, z);
        }

      }
      animate();

      initAudio();
    </script>
  </body>
</html>