-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
205 lines (156 loc) · 7.28 KB
/
main.js
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x151924, 0);
renderer.setPixelRatio(1);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
// Configurar la cámara perspectiva
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
// Luces en la escena
const spotLight = new THREE.SpotLight(0x51e153, 10000, 100, 0.5, 1);
spotLight.position.set(10, -30, -20);
spotLight.castShadow = true;
spotLight.shadow.bias = -0.001;
scene.add(spotLight);
const spotLight1 = new THREE.SpotLight(0x51e153, 10000, 100, 0.5, 1);
spotLight1.position.set(-10, 30, 20);
spotLight1.castShadow = true;
spotLight1.shadow.bias = -0.001;
scene.add(spotLight1);
let mesh; // Variable para almacenar la malla cargada
// Cargar el modelo 3D
const loader = new GLTFLoader().setPath('public/logo3d/');
loader.load('logoul.gltf', (gltf) => {
console.log('loading model');
mesh = gltf.scene;
mesh.traverse((child) => {
if (child.isMesh) {
const material = new THREE.MeshStandardMaterial({
color: 0x61CE7D,
roughness: 0.8,
metalness: 0.2
});
child.material = material; // Asignar material personalizado
}
});
mesh.scale.set(2.5, 2.5, 2.5);
mesh.position.set(0, -1.3, 0);
// Ajustar la rotación del mesh
mesh.rotation.y = Math.PI / -2; // Ajustar la rotación en el eje Y (90 grados)
scene.add(mesh);
}, (xhr) => {
console.log(`loading ${xhr.loaded / xhr.total * 100}%`);
}, (error) => {
console.error(error);
});
// Ajustar la cámara y el renderizador al redimensionar la ventana
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Variables para rastrear el movimiento del mouse
let mouseX = 0, mouseY = 0;
const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;
// Evento de movimiento del mouse
document.addEventListener('mousemove', (event) => {
mouseX = (event.clientX - windowHalfX) / windowHalfX;
mouseY = (event.clientY - windowHalfY) / windowHalfY;
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7
const cursor = document.getElementById('cursor');
var dof = null;
// Detectar cuando el cursor sale del área del iframe
document.addEventListener('mouseleave', function () {
dof = false;
cursor.style.display = 'none'; // Ocultar el cursor cuando el cursor sale del área del iframe
});
// Detectar cuando el cursor entra en el área del iframe
document.addEventListener('mouseenter', function () {
dof = true;
cursor.style.display = 'block'; // Mostrar el cursor cuando el cursor entra en el área del iframe
});
var yaSalio = true;
let direction = 1; // 1 para subir, -1 para bajar
setTimeout(function () {
mesh.rotation.y = -1.6
}, 2500);
function animate() {
requestAnimationFrame(animate);
if (dof) {
if (camera.position.y.toFixed(1) != (-mouseY * 1).toFixed(1) || camera.position.x.toFixed(1) != (mouseX * 2).toFixed(1) || mesh.rotation.y.toFixed(2) != -1.57){
yaSalio = false;
mesh.rotation.y += ((mesh.rotation.y < -1.57) ? 0.01 : 0);
mesh.rotation.y -= ((mesh.rotation.y > -1.57) ? 0.01 : 0);
camera.position.x += ((camera.position.x < mouseX * 3) ? 0.05 : 0);
camera.position.x -= ((camera.position.x > mouseX * 3) ? 0.05 : 0);
camera.position.y += ((camera.position.y < -mouseY * 1) ? 0.05 : 0);
camera.position.y -= ((camera.position.y > -mouseY * 1) ? 0.05 : 0);
// En tu bucle o donde necesites el movimiento
if (mesh.position.y < -1 && direction === 1) {
mesh.position.y += 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y >= -1 && direction === 1) {
direction = -1; // Cambiar la dirección una vez que alcanza el límite superior
} else if (mesh.position.y > -1.3 && direction === -1) {
mesh.position.y -= 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y <= -1.3 && direction === -1) {
direction = 1; // Cambiar la dirección una vez que alcanza el límite inferior
}
}else{
// En tu bucle o donde necesites el movimiento
if (mesh.position.y < -1 && direction === 1) {
mesh.position.y += 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y >= -1 && direction === 1) {
direction = -1; // Cambiar la dirección una vez que alcanza el límite superior
} else if (mesh.position.y > -1.3 && direction === -1) {
mesh.position.y -= 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y <= -1.3 && direction === -1) {
direction = 1; // Cambiar la dirección una vez que alcanza el límite inferior
}
// Calcular la rotación de la cámara basada en la posición del mouse
camera.position.x = mouseX * 2;
camera.position.y = -mouseY * 1;
setTimeout(function () {
yaSalio = true;
}, 1000000);
}
camera.lookAt(scene.position);
renderer.render(scene, camera);
} else {
// Restablecer la rotación del mesh a la orientación neutra
camera.position.x += ((camera.position.x < 0) ? 0.01 : 0);
camera.position.y += ((camera.position.y < 0) ? 0.01 : 0);
// Restablecer la rotación del mesh a la orientación neutra
camera.position.x -= ((camera.position.x > 0) ? 0.01 : 0);
camera.position.y -= ((camera.position.y > 0) ? 0.01 : 0);
camera.lookAt(scene.position);
if(mesh.rotation){
mesh.rotation.y += 0.008;
}
// En tu bucle o donde necesites el movimiento
if (mesh.position.y < -1 && direction === 1) {
mesh.position.y += 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y >= -1 && direction === 1) {
direction = -1; // Cambiar la dirección una vez que alcanza el límite superior
} else if (mesh.position.y > -1.3 && direction === -1) {
mesh.position.y -= 0.002; // o cualquier velocidad deseada
} else if (mesh.position.y <= -1.3 && direction === -1) {
direction = 1; // Cambiar la dirección una vez que alcanza el límite inferior
}
renderer.render(scene, camera);
}
}
animate();