Добавьте максимальное движение в onMouseMove для сцены в Three. JS - PullRequest
Новая
       92

Добавьте максимальное движение в onMouseMove для сцены в Three. JS

1 голос
/ 15 января 2020

Я успешно добавил действительно хорошее движение мыши в сцену из трех. js, где камера находится внутри сцены, лицом к одной из четырех стен. Перемещение мыши влево или вправо перемещается и слегка качает сцену.

Если вы продолжаете удерживать мышь над одной стороной экрана, вы в конечном итоге «летите» за пределы сцены и теперь просматриваете весь трехмерный объект снаружи, больше не внутри.

Мне было интересно, как я могу обновить мой код ниже, чтобы ограничить максимальную сумму, которую вы можете перемещать влево или вправо, чтобы вы не могли оказаться вне сцены ?

Если я смогу избежать добавления другой библиотеки, такой как Orbit Controls, это было бы идеально, но если это единственный способ, я сделаю это. Мне кажется, я был близок к тому, чтобы добавить какой-то Math.Max ​​в положение камеры в моей функции animate (), но пока не добился успеха.

Заранее спасибо за любую помощь! 

window.addEventListener("load", loadGltf, false);
window.addEventListener("resize", onWindowResize, false);
const progressBar = document.querySelector("progress");

//store our imported glTF scene when loaded successfully
const gltfStore = {};

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container = document.getElementById( 'container' );



//camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.set(0, 0, 0);
camera.lookAt(0, 0, 5);

windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,
        mouseX = 0,
        mouseY = 0;

//re-establish camera view on window resize
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

//lighting
const lightFill = new THREE.PointLight(0xffffff, 1, 500);
lightFill.position.set(0, 0, 5);
scene.add(lightFill);

const lightKey = new THREE.PointLight(0xffffff, 1, 500);
lightKey.position.set(20, 0, 20);
scene.add(lightKey);

const loader = new THREE.GLTFLoader();


function loadGltf() {
  loader.load(
    "<?php echo get_template_directory_uri();?>/objects/SM_LookDev_TextureTest_FromFBX.glb",
    //onLoad
    function(gltf) {
      scene.add(gltf.scene);
       mesh = gltf.scene;
      //set material emissive to 0
      gltf.scene.children[0];
      gltfStore.scene = gltf.scene;
       document.addEventListener("mousemove", onMouseMove);

    }

  );

  container.appendChild(renderer.domElement); 

// Mouse movement

function onMouseMove(event) {

          mouseX = (event.clientX - windowHalfX) / 10;
          mouseY = (event.clientY - windowHalfY) / 30;
}


function getMouseX(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientX;
    else
        return event.touches[0].clientX;
}

function getMouseY(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientY;
    else
        return event.touches[0].clientY;
}

  function animate() {
    requestAnimationFrame(animate);


    camera.position.x += (mouseX - camera.position.x) * .0005;
        camera.position.y += (-mouseY - camera.position.y) * .0003;
        camera.lookAt(0,0,10);
    renderer.render(scene, camera);

  }



  animate();


}

1 Ответ

2 голосов
/ 15 января 2020

Three. js поставляется с некоторыми служебными методами в классе Math, которые могут помочь с этим. Вы можете использовать THREE.Math.Clamp, чтобы ограничить минимальное и максимальное значения mouseX и mouseY: 

function onMouseMove(event) {
    mouseX = THREE.Math.clamp((event.clientX - windowHalfX) / 10, -20, 20);
    mouseY = THREE.Math.clamp((event.clientY - windowHalfY) / 30, -10, 10);
}

Минимальное и максимальное значения -20, 20, et c зависит от границ вашего .gltf объекта, поэтому вам придется соответствующим образом их корректировать.

Это всего лишь вспомогательный метод, который использует JavaScript собственный Math.min() и Math.max() внутренне для «зажима» значения.

Обновление для r113 +:

Я только что узнал, что в следующей версии Three. js (редакция 113) переименует класс THREE.Math в THREE.MathUtils (вероятно, чтобы избежать конфликта с классом JavaScript native Math), поэтому убедитесь, что вы используете правильное имя на основе версия Three. js, которую вы используете.

...