Cześć,
mam pytanie, bo nie do końca potrafię znaleźć rozwiązanie. Na stronie chaosgone.global jest logo, które kieruje się zawsze w stronę kursora.
Załączam też obrazek.
Da radę wykonać to w samym HTML/CSS/JS?
0
3
Dodaj atrybut on mouseOver do body i za każdym ruchem odczytuj koordynaty i ustawiaj css logo tak aby było skorowane w stronę odczytanych wartości. Tak da.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obracanie obrazka za ruchem myszy</title>
<style>
#image {
width: 150px;
height: 150px;
transition: transform 0.1s ease;
}
</style>
</head>
<body>
<h2>Przesuń myszą, aby obrócić obrazek</h2>
<img src="https://via.placeholder.com/150" id="image" alt="Obrazek">
<script>
const image = document.getElementById("image");
document.addEventListener("mousemove", (event) => {
// Pobierz środek obrazka
const rect = image.getBoundingClientRect();
const imageCenterX = rect.left + rect.width / 2;
const imageCenterY = rect.top + rect.height / 2;
// Oblicz różnicę między pozycją myszy a środkiem obrazka
const deltaX = event.clientX - imageCenterX;
const deltaY = event.clientY - imageCenterY;
// Oblicz kąt, pod jakim obrazek powinien się obrócić
const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
// Ustaw obrót obrazka
image.style.transform = `rotate(${angle}deg)`;
});
</script>
</body>
</html>
0
johnny_Be_good napisał(a):
Dodaj atrybut on mouseOver do body i za każdym ruchem odczytuj koordynaty i ustawiaj css logo tak aby było skorowane w stronę odczytanych wartości. Tak da.
Twoja propozycja działa, ale nie do końca. Na stronie przykładowej to logo obraca się jakby w 3D. Na Twoim przykładzie jest rotacja obrazka w jednej płaszczyźnie.
1
co17rey napisał(a):
johnny_Be_good napisał(a):
Dodaj atrybut on mouseOver do body i za każdym ruchem odczytuj koordynaty i ustawiaj css logo tak aby było skorowane w stronę odczytanych wartości. Tak da.
Twoja propozycja działa, ale nie do końca. Na stronie przykładowej to logo obraca się jakby w 3D. Na Twoim przykładzie jest rotacja obrazka w jednej płaszczyźnie.
To potrzebujesz utworzyć obiekt 3D coś jak to i go obracać
0
co17rey napisał(a):
Twoja propozycja działa, ale nie do końca. Na stronie przykładowej to logo obraca się jakby w 3D. Na Twoim przykładzie jest rotacja obrazka w jednej płaszczyźnie.
@co17rey https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
3
W diziejszych czasach takie rzeczy robi się w 3 minuty...
Na stronce, którą wskazałeś używają jakiejś koszmarnie gigantycznej biblioteki, która ma WebComponent model-viewer pochodzący chyba z biblioteki: https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js
Niepolecam tego wariantu.
Tak samo nie polecam wariantu, który pokazał @Riddle - obrobisz się jak głupi a efekt będzie zwyczajnie marny.
Ogólnie najlepiej zrobić canvas3d na nim położyć obiekt 3D i tyle. Trochę musisz o tym poczytać na szczęście w sieci są tysiące przykładów.
Poczytaj o https://threejs.org/. Lepiej zrobić to tak jak należy.
Przykład online: https://jsfiddle.net/mwzgv8tx/
Cały kod przykładu (większość to model głowy):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Twarz Śledząca Kursor</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Ustawienia sceny
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);
// Dodanie światła
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);
// Tworzenie głowy
const headGeometry = new THREE.SphereGeometry(1, 32, 32);
const skinMaterial = new THREE.MeshPhongMaterial({ color: 0xffc0cb });
const head = new THREE.Mesh(headGeometry, skinMaterial);
scene.add(head);
// Tworzenie nosa
const noseGeometry = new THREE.ConeGeometry(0.1, 0.3, 32);
const noseMaterial = new THREE.MeshPhongMaterial({ color: 0xffa07a });
const nose = new THREE.Mesh(noseGeometry, noseMaterial);
nose.position.set(0, 0, 1.1);
nose.rotation.x = Math.PI / 2;
head.add(nose);
// Tworzenie oczu
const eyeGeometry = new THREE.SphereGeometry(0.1, 16, 16);
const eyeMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });
const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
leftEye.position.set(-0.3, 0.3, 0.9);
rightEye.position.set(0.3, 0.3, 0.9);
head.add(leftEye);
head.add(rightEye);
// Tworzenie ust
const mouthGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.05, 32);
const mouthMaterial = new THREE.MeshPhongMaterial({ color: 0xff6347 });
const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);
mouth.position.set(0, -0.3, 0.9);
mouth.rotation.x = Math.PI / 2;
head.add(mouth);
// Ustawienia kamery
camera.position.z = 5;
// Aktualizacja twarzy przy ruchu kursora
document.addEventListener('mousemove', (event) => {
// Przeliczenie pozycji kursora na współrzędne kamery
const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
// Poprawione obliczanie docelowej rotacji twarzy na podstawie pozycji kursora
head.rotation.y = mouseX * 0.5;
head.rotation.x = -mouseY * 0.5; // Zmiana znaku, aby poprawić kierunek
});
// Funkcja renderująca
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// Obsługa zmiany rozmiaru okna
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.