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
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
