carlynlee.github.io/geometries.html at master · carlynlee/carlynlee.github.io · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Random Geometries</title>
    <style>
      /* Define the styles for the canvas */
      #canvas {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>


    <div id="canvas"></div>

    <!-- Include Three.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

    <script>
      // Create the scene, camera, and renderer
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("canvas").appendChild(renderer.domElement);

      // Create a random geometry and a material for it
      const geometry = getRandomGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });

      // Create a mesh and add it to the scene
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      // Add some lights to the scene
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      const pointLight = new THREE.PointLight(0xffffff, 0.5);
      pointLight.position.set(10, 10, 10);
      scene.add(pointLight);

      // Set the camera position and look at the mesh
      camera.position.set(0, 0, 5);
      camera.lookAt(mesh.position);

      // Add event listeners for zooming in and out
      document.addEventListener("wheel", onZoom);

      // Define the function for generating a random geometry
      function getRandomGeometry() {
        const shapes = ["box", "sphere", "torus", "cylinder"];
        const shape = shapes[Math.floor(Math.random() * shapes.length)];
        const size = Math.random() * 2 + 1;
        switch (shape) {
          case "box":
            return new THREE.BoxGeometry(size, size, size);
          case "sphere":
            return new THREE.SphereGeometry(size, 32, 32);
          case "torus":
            return new THREE.TorusGeometry(size / 2, size / 4, 32, 64);
          case "cylinder":
            return new THREE.CylinderGeometry(size / 2, size / 2, size, 32);
        }
      }

      // Define the function for zooming in and out
      function onZoom(event) {
        event.preventDefault();
        const delta = event.deltaY * 0.1;
        camera.position.z += delta;
      }

      // Animate the scene
      function animate() {
        requestAnimationFrame(animate);
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;
        renderer.render(scene, camera);
      }

      animate();
    </script>


  </body>
</html>