SketchbookAI/test.html at master · friuns2/SketchbookAI · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Boxes with lil-gui</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.18"></script>
</head>

<body>
    <script>

        class Box {
            constructor(size = 1, color = 0x00ff00) {
                this.size = size;
                this.color = color;
                this.mesh = this.createMesh();
            }

            createMesh() {
                const geometry = new THREE.BoxGeometry(this.size, this.size, this.size);
                const material = new THREE.MeshBasicMaterial({ color: this.color, wireframe: true });
                return new THREE.Mesh(geometry, material);
            }
        }

        // Set up 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();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create two instances of the Box class
        const box1 = new Box(1, 0x00ff00);
        const box2 = new Box(1, 0xff0000);
        box2.mesh.position.x = 2;
        scene.add(box1.mesh);
        scene.add(box2.mesh);

        // Position the camera
        camera.position.z = 5;

        // Set up lil-gui
        const gui = new lil.GUI();

        // Add a range slider for controlling the rotation speed
        const rotationControl = {
            speed: 0.01
        };
        gui.addFolder("Rotation Control");
        let ctrl= gui.add(rotationControl, 'speed', 0, 0.1, 0.001).name('Rotation Speed');
        ctrl.onChange((value) => {
            box1.mesh.scale.x = value;
        });
        ctrl.onChange((value) => {
            box2.mesh.scale.x = value;
        });

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            box1.mesh.rotation.y += rotationControl.speed; // Apply rotation speed
            box2.mesh.rotation.y += rotationControl.speed; // Apply rotation speed
            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>