THREE.JS restrict movement (ограничить перемещение в изометрии)

Question

Есть следующий пример ссылка на codepen. Как можно ограничить перемещение куба внутри окна? есть похожий пример, stackoverflow, но он не работает в изометрии.

update: немного ошибься в описании, нужно чтоб изначально объект был увеличенный, и не помещался в экран, при таче, чтобы можно было перемещать, но чтобы между края и моделью не было свободного места. (это планируется карта города). Исходный код выглядит так

const width = 700
const height = 300
const aspect = width / height

const scene = new THREE.Scene()
scene.background = new THREE.Color(0xCCCCCC);
scene.add(new THREE.AxesHelper(500))

const d = 1.1
let camera = new THREE.OrthographicCamera(
    -d * aspect,
    d * aspect,
    d,
    -d,
    0.1,
    100,
)

camera.position.set(20, 20, 20)
camera.lookAt(scene.position)
camera.updateProjectionMatrix()

const container = document.createElement('div');
document.body.appendChild(container);
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(width, height)
container.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.screenSpacePanning = true
controls.enableRotate = false
controls.enableZoom = false

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0)
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);
    render();
    }

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

animate()

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 1

вообщем нашел некоторое решение которое работает при разных значениях zoom, сделал другой формат камеры и просто модифицировал модель изменив rotation, чтоб привести к изометрическому виду

камера:

const camera = new THREE.OrthographicCamera(
  -this.d * this.game.aspect,
  this.d * this.game.aspect,
  this.d,
  -this.d,
  -5,
  100,
)

camera.position.set(0, 0, 5)
camera.zoom = 15
camera.updateProjectionMatrix()

для модели подогнал вращение и взял по модели box

model.rotation.x = 0.5
model.rotation.y = -5.5
const bbox = new THREE.Box3().setFromObject(model)

в функции animate (тут есть костыли, так как небыло разобраться времени, но в моем кейсе в разных расширениях, зумах, устройствах это корректно работает), если есть желание - разбиритесь, поправьте - прокомментируйте

    const factor = camera.zoom
    const x1 = camera.position.x + camera.left / factor
    const x1a = Math.max(x1, bbox.min.x / 2)
    let pos_x = x1a - camera.left / factor

    const x2 = pos_x + camera.right / factor
    const x2a = Math.min(x2, bbox.max.x + bbox.min.x / 2)
    pos_x = x2a - camera.right / factor

    const y1 = camera.position.y + camera.bottom / factor
    const y1a = Math.max(y1, bbox.min.y - bbox.min.y / 2)
    let pos_y = y1a - camera.bottom / factor

    const y2 = pos_y + camera.top / factor
    const y2a = Math.min(y2, bbox.max.y - bbox.max.y / 2 - 0.04)
    pos_y = y2a - camera.top / factor

    camera.position.set(pos_x, pos_y, camera.position.z)
    camera.lookAt(pos_x, pos_y, controls.target.z)
    // orbitControls
    controls.target.x = pos_x
    controls.target.y = pos_y
    controls.update()

БЛОГ НА HUSL

THREE.JS restrict movement (ограничить перемещение в изометрии)

Ответы (1 шт):