Published
Edited
Feb 13, 2020
2 stars
md`# Panning in Orthographic Orbit Control in Three.js`
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;
}
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.
}
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
}
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.