Three.js Yardıma İhtiyacım Var

Question

Merhaba,
Three.js ile mouse takibi ile kamera yaptım ancak hareketler çok sert oluyor kodlar bu şekilde. Aşağıdaki sitenin ana sayfasındaki gibi geçilşeri daha yumuşak hale nasıl getirebilirim.
https://adidaschile20.com/

camera.lookAt(new THREE.Vector3(0,0,0));
    var ambientLight = new THREE.AmbientLight(0x404040,1);
    scene.add(ambientLight);
    mouseX = 0;
    mouseY = 0;
    document.addEventListener('mousemove', function(e){
        var halfHeight = window.innerHeight / 2;
        var halfWidth = window.innerWidth / 2;
        mouseX = (e.clientX - halfWidth) / 300;
        mouseY = (e.clientY - halfHeight) / 500;
    });

createBox('box1', 1,3,1,0,1,1,0x00ff00); //green
    createBox('box2', 1,3,1,-2,1,0,0xff0000); //red
    createBox('box3', 1,3,1,2,1,0,0xff00ff); //pink
    createDirectionalLight();
    render();
}
    function render(){
    camera.position.x += (mouseX - camera.position.x);
    camera.position.y += (-mouseY - camera.position.y);
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

raymondred · Accepted Answer

GPT 4 ün cevabı

Kameranızın hareketlerinin çok sert olduğunu belirtmişsiniz ve bu hareketleri daha yumuşak hale getirmek istiyorsunuz. Three.js'te kamera hareketlerini yumuşatmanın birkaç yolu vardır. Burada, hareketlerinizi daha akıcı hale getirmek için "lerp" (linear interpolation) fonksiyonunu kullanabiliriz.
lerp fonksiyonu, iki değer arasında düzgün bir geçiş yapmanıza olanak tanır. lerp'i kullanarak, kameranın mevcut pozisyonunu ve mouse ile belirlenen hedef pozisyon arasında yumuşak bir geçiş yapabilirsiniz. Bu, hareketlerin daha az ani ve daha akıcı olmasını sağlayacaktır.
Aşağıda, kodunuzun render fonksiyonunu lerp kullanacak şekilde nasıl değiştirebileceğinizi gösteriyorum:

Bu değişikliklerle, kamera hareketleriniz daha yumuşak ve doğal hale gelecektir. lerpFactor değeri, hareketin ne kadar hızlı veya yavaş olacağını kontrol eder. Bu değeri ayarlayarak, istediğiniz yumuşaklık seviyesini elde edebilirsiniz. Daha yavaş ve daha yumuşak bir hareket için bu değeri düşürebilirsiniz.

Cha · Answer

ChatGPT'ye sordunuz mu?

Ryloka · Answer

Cha adlı üyeden alıntı:						mesajı görüntüle									ChatGPT'ye sordunuz mu? 		 Aklıma yeni geldi teşekkür ederim aynı sorunu yaşayanlar için kodu bu şekilde düzenleyerek çözebilir.

var cameraSpeed = 0.05; // Adjust this value for smoother/faster movement

function render() {
    var targetX = mouseX;
    var targetY = -mouseY;

// Smoothly interpolate between the current position and the target position
    camera.position.x += (targetX - camera.position.x) * cameraSpeed;
    camera.position.y += (targetY - camera.position.y) * cameraSpeed;

camera.lookAt(scene.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

Cha · Answer

Ryloka adlı üyeden alıntı:						mesajı görüntüle									 Aklıma yeni geldi teşekkür ederim aynı sorunu yaşayanlar için kodu bu şekilde düzenleyerek çözebilir.

var cameraSpeed = 0.05; // Adjust this value for smoother/faster movement

function render() {
    var targetX = mouseX;
    var targetY = -mouseY;

// Smoothly interpolate between the current position and the target position
    camera.position.x += (targetX - camera.position.x) * cameraSpeed;
    camera.position.y += (targetY - camera.position.y) * cameraSpeed;

camera.lookAt(scene.position);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
} 		Projenizden demoları bizimlede paylaşırsanız takip etmek isterim. Ortaya güzel bir iş çıkacak gibi. Başarılar.

Fudoaridolu · Answer

raymondred adlı üyeden alıntı:						mesajı görüntüle									GPT 4 ün cevabı

Kameranızın hareketlerinin çok sert olduğunu belirtmişsiniz ve bu hareketleri daha yumuşak hale getirmek istiyorsunuz. Three.js'te kamera hareketlerini yumuşatmanın birkaç yolu vardır. Burada, hareketlerinizi daha akıcı hale getirmek için "lerp" (linear interpolation) fonksiyonunu kullanabiliriz.
lerp fonksiyonu, iki değer arasında düzgün bir geçiş yapmanıza olanak tanır. lerp'i kullanarak, kameranın mevcut pozisyonunu ve mouse ile belirlenen hedef pozisyon arasında yumuşak bir geçiş yapabilirsiniz. Bu, hareketlerin daha az ani ve daha akıcı olmasını sağlayacaktır.
Aşağıda, kodunuzun render fonksiyonunu lerp kullanacak şekilde nasıl değiştirebileceğinizi gösteriyorum:

Bu değişikliklerle, kamera hareketleriniz daha yumuşak ve doğal hale gelecektir. lerpFactor değeri, hareketin ne kadar hızlı veya yavaş olacağını kontrol eder. Bu değeri ayarlayarak, istediğiniz yumuşaklık seviyesini elde edebilirsiniz. Daha yavaş ve daha yumuşak bir hareket için bu değeri düşürebilirsiniz. 		Konu dışı hocam forum da sizi uzun zamandır görmedim yani hiç görmedim ta ki ne zaman blacklist izlemeye başladım siz de forum da belirdiniz &#128512;

zeyrek34 · Answer

tween.js kullanabilirsin alternatif olarak

raymondred · Answer

Fudoaridolu adlı üyeden alıntı:						mesajı görüntüle									Konu dışı hocam forum da sizi uzun zamandır görmedim yani hiç görmedim ta ki ne zaman blacklist izlemeye başladım siz de forum da belirdiniz &#128512; 		her şey planın bir parçası hocam