3D-Viewer-Custom-Autorotation/index.html at main · UnaPinyaMas/3D-Viewer-Custom-Autorotation · 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="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo 3D - CSGO Karambit Autotronic</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="description" content="Visualiza un modelo 3D del cuchillo CSGO Karambit Autotronic con opciones de personalización.">
    <meta name="keywords" content="CSGO, Karambit, Autotronic, Modelo 3D, Three.js">
    <meta name="author" content="Tu Nombre">
    <meta property="og:title" content="Modelo 3D - CSGO Karambit Autotronic">
    <meta property="og:description" content="Visualiza un modelo 3D del cuchillo CSGO Karambit Autotronic con opciones de personalización.">
    <meta property="og:image" content="ruta/a/tu/imagen.jpg">
    <meta property="og:url" content="URL de tu sitio">
    <meta name="twitter:card" content="summary_large_image">
</head>
<body>
    <div id="scene-container"></div>

    <!-- Botón Inicio -->
    <a href="inicio.html" class="home-button" aria-label="Ir a Inicio">
        <span class="home-icon">෴</span>
    </a>


    <!-- Menú de hamburguesa -->
    <label class="hamburger" aria-label="Abrir menú">
        <input type="checkbox" aria-hidden="true">
        <svg viewBox="0 0 32 32" aria-hidden="true">
            <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
            <path class="line" d="M7 16 27 16"></path>
        </svg>
    </label>

    <!-- Menú de opciones -->
    <div id="menu" class="menu" aria-label="Opciones de la escena">
        <h2>Opciones de la Escena</h2>

        <!-- Color de fondo -->
        <label for="bgColor">Color de fondo:</label>
        <input type="color" id="bgColor" value="#232633">

        <!-- Luz ambiental -->
        <h3>Luz Ambiental</h3>
        <label for="ambientLightColor">Color:</label>
        <input type="color" id="ambientLightColor" value="#ffffff">

        <label for="ambientLightIntensity">Intensidad:</label>
        <input type="range" id="ambientLightIntensity" min="0" max="5" step="0.1" value="2">

        <!-- Luz direccional -->
        <h3>Luz Direccional</h3>
        <label for="directionalLightColor">Color:</label>
        <input type="color" id="directionalLightColor" value="#ffffff">

        <label for="directionalLightIntensity">Intensidad:</label>
        <input type="range" id="directionalLightIntensity" min="0" max="10" step="0.1" value="4">

        <!-- Zoom -->
        <h3>Zoom</h3>
        <label for="zoom">Nivel de zoom:</label>
        <input type="range" id="zoom" min="1" max="100" value="50">

        <!-- Rotación automática -->
        <h3>Rotación Automática</h3>
        <div class="checkbox-wrapper-container">
            <label class="checkbox-wrapper">
                <input type="checkbox" id="autoRotate">
                <div class="checkmark">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M20 6L9 17L4 12" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </label>
        </div>

        <!-- Velocidad de rotación -->
        <h3>Velocidad de Rotación</h3>
        <label for="rotationSpeed">Velocidad:</label>
        <input type="range" id="rotationSpeed" min="0.1" max="5" step="0.1" value="1">
    </div>

    <!-- Cargar Three.js primero -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.146.0/build/three.min.js"></script>
    <!-- Luego GLTFLoader -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.146.0/examples/js/loaders/GLTFLoader.js"></script>
    <!-- Agrega OrbitControls -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.146.0/examples/js/controls/OrbitControls.js"></script>
    <!-- Finalmente tu script -->
    <script src="script.js"></script>
</body>
</html>