Сохранение 3d-модели в видимой области при анимации в три. js - PullRequest
Новая
       12

Сохранение 3d-модели в видимой области при анимации в три. js

1 голос
/ 25 марта 2020

Я начал с трех. js, и я пытался случайным образом перемещать объект. Но я сталкиваюсь с проблемой определения того, когда моя 3d-модель выходит за пределы видимой области сцены. Я не хочу, чтобы 3d-модель вышла за пределы сцены. Когда я зарегистрировал положение 3d-модели и ширину окна. Я обнаружил, что в них была огромная разница, даже когда модель находится в углу видимой области. Может кто-нибудь помочь мне здесь?

Также, если есть какие-либо предложения о том, как мне достичь большей цели случайного перемещения 3d-объекта, пожалуйста, поделитесь. 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xff0000, .5);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;


let pos = new THREE.Vector3();
pos = pos.setFromMatrixPosition(cube.matrixWorld);
pos.project(camera);

let widthHalf = window.innerWidth / 2;
let heightHalf = window.innerHeight / 2;

pos.x = (pos.x * widthHalf) + widthHalf;
pos.y = - (pos.y * heightHalf) + heightHalf;
pos.z = 0;


var numFlag = 0,
  value = 0.01;

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

animate();

function firstQuadrant() {
  if (numFlag < 300) {
    cube.position.x += value;
    cube.position.y += value;
  } else {
    cube.position.x -= value;
    cube.position.y -= value;
  }
  console.log(cube.position.x, window.innerHeight,pos.x);
  numFlag = numFlag > 600 ? 0 : numFlag + 1;
}
body {
  margin: 0;
}

canvas {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js" integrity="sha256-gSh8eotzb/CVvCREGPUNgIWuDnTYnZvVOQnRrP1eDjI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/three-gltf-loader@1.111.0/index.min.js"></script>

Обновление

Когда я пытаюсь изменить мировые координаты на экранные координаты, добавив следующие строки 

let pos = new THREE.Vector3();
pos = pos.setFromMatrixPosition(cube.matrixWorld);
pos.project(camera);

let widthHalf = window.innerWidth / 2;
let heightHalf = window.innerHeight / 2;

pos.x = (pos.x * widthHalf) + widthHalf;
pos.y = - (pos.y * heightHalf) + heightHalf;
pos.z = 0;

тогда я получаю значение pos.x как NaN. Что я пропустил / пошло не так?

...