Published
Edited
Feb 13, 2020
2 stars
Insert cell
md`# Panning in Orthographic Orbit Control in Three.js`
Insert cell
renderer = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
function render() {
renderer.render(scene, camera)
}

const orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableRotate = false;
orbit.enablePan = true;
orbit.mouseButtons = { LEFT: THREE.MOUSE.PAN };
orbit.touches = {
ONE: THREE.TOUCH.DOLLY_PAN
}

orbit.addEventListener('change', render);
fitToObject(scene, orbit, camera);
render();
return renderer.domElement;
}
Insert cell
function fitToObject(scene, orbit, camera) {
const viewHeight = height;
const obj = scene.getObjectByName('point-cloud')
const box = new THREE.Box3().setFromObject(obj);
const center = box.getCenter(new THREE.Vector3());
camera.zoom = Math.min(width / (box.max.x - box.min.x), height / (box.max.y - box.min.y)) * .9;
camera.updateProjectionMatrix();
camera.updateMatrix()
orbit.target.copy(center);
orbit.update(); // Must use orbit.update.
}
Insert cell
Insert cell
pointCloud = {
function getPoints() {
let MAX_POINTS = 500;
const points = new Array(MAX_POINTS);
while (MAX_POINTS--) {
const point = new THREE.Vector3(
THREE.Math.randFloatSpread(45),
THREE.Math.randFloatSpread(45),
THREE.Math.randFloatSpread(45)
);
points[MAX_POINTS]= point;
}
return points
}
const points = getPoints()
const geometry = new THREE.BufferGeometry().setFromPoints(points)
const material = new THREE.PointsMaterial({ color: '#08f', size: 4, sizeAttenuation: false })
const pointCloud = new THREE.Points(geometry, material);
pointCloud.name = 'point-cloud'
scene.add(pointCloud);
return pointCloud
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more