RS-RISING-SHOOTERS/A2.html at main · NSSTUDIO-html/RS-RISING-SHOOTERS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D A2 Model</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>

    <script>
        // Scene setup
        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.body.appendChild(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff,1);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // Orbit Controls (for interactive viewing)
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // Animate the controls for smoother transitions
        controls.dampingFactor = 0.05;
        controls.screenSpacePanning = false;
        controls.minDistance = 1;
        controls.maxDistance = 10;

        // Camera positioning
        camera.position.z = 3;

        // GLTF Loader
        const loader = new THREE.GLTFLoader();
        const modelPath = '/storage/emulated/0/Download/Stealth_Operative_A2_0411101742_texture.glb'; // Replace with the public URL of your model

        loader.load(
            modelPath,
            function (gltf) {
                scene.add(gltf.scene);
                // Optionally adjust the model's position, scale, or rotation here
                 gltf.scene.position.set(0, 0, 0);
                gltf.scene.scale.set(1, 1, 1);
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.error('An error happened loading the model', error);
            }
        );

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update(); // Required for OrbitControls to work
            renderer.render(scene, camera);
        }

        // Handle window resizing
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        window.addEventListener('resize', onWindowResize, false);

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