Три JS CameraRotation на GLTF - PullRequest
Новая
       23

Три JS CameraRotation на GLTF

0 голосов
/ 20 января 2020

Камера запускается в правильном положении (сфокусировано на объекте). Однако щелчок мыши перетянет камеру на скайбокс, и вращение камеры будет сфокусировано внутри скайбокса. Я пытаюсь найти способ сохранить фокусировку вращения камеры на объекте GLTF. Также, если я рекурсивно вызываю функцию animate в requestAnimateFrame, вращение становится безумно ошибочным и потребляет слишком много ресурсов ЦП. (Я супер нуб к 3 JS, поэтому каждый урок, который я go через инструктора вызывает рекурсивно функцию animate. В моем случае это не работает) 

  let scene, camera, renderer, controls, materialArray, mac;

  function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      1,
      10000
    );

    camera.aspect = 1.940700808625337;
    camera.position.x = 2713.573548977686;
    camera.position.y = 451.8447810139787;
    camera.position.z = -200.3251900190721;


    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, animate.domElement);
    controls.addEventListener("change", animate);
    controls.minDistance = 500;
    controls.maxDistance = 1500;

    materialArray = [];
    let texture_ft = new THREE.TextureLoader().load("asd.jpg");
    let texture_bk = new THREE.TextureLoader().load("asd2.jpg");
    let texture_up = new THREE.TextureLoader().load("asd3.jpg");
    let texture_dn = new THREE.TextureLoader().load("asd4.jpg");
    let texture_rt = new THREE.TextureLoader().load("asd5.jpg");
    let texture_lf = new THREE.TextureLoader().load("asd6.jpg");

    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_ft }));
    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_bk }));
    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_up }));
    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_dn }));
    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_rt }));
    materialArray.push(new THREE.MeshBasicMaterial({ map: texture_lf }));

    for (let i = 0; i < 6; i++) materialArray[i].side = THREE.BackSide;
    let skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
    let skybox = new THREE.Mesh(skyboxGeo, materialArray);
    scene.add(skybox);

    ambientlight = new THREE.AmbientLight(0xfffffd, 1.4);
    scene.add(ambientlight);

    light = new THREE.PointLight(0xc4c4c4, 2, 1);
    light.position.set(-1000, 300, -500);
    scene.add(light);
    let loader = new THREE.GLTFLoader();
    loader.load("scene.gltf", function(gltf) {
      mac = gltf.scene.children[0];
      mac.scale.set(4.85, 4.85, 4.85);
      mac.position.x = -1000;
      mac.position.z = -150;
      mac.position.y = -5000;
      scene.add(gltf.scene);
      camera.lookAt(mac.position);

      animate();
    });
  }
  function animate() {
    renderer.render(scene, camera);
    //requestAnimationFrame(animate);
  }

  init();
...