This HTML page showcases a scene with various points that can be comfortably zoomed in using the mouse wheel.
However, I am looking to implement the functionality to drag the scene after zooming in. The idea is to click and hold the left mouse button while moving the mouse, causing the entire scene (or camera) to move accordingly by adjusting x/y coordinates.
I attempted to set up a listener to capture clicks, but it does not produce any output in the console when clicking. Additionally, there was a suggestion to use DragControls, but it appears to be undefined in THREE as uncommenting those lines leads to errors.
So, the question remains: how can I enable dragging of the entire scene (or camera)?
Code:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<title>Test</title>
</head>
<body>
<script>
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 150);
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x228B22, 1);
document.body.appendChild(renderer.domElement);
// Define a standard Circle
circle = new THREE.CircleGeometry(1, 20);
var max = 50;
var min = -50;
for (var i = 0; i < 100; i++) {
var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('yellow'), opacity: 0.5 } ) );
object.position.x = Math.random() * (max - min) + min;
object.position.y = Math.random() * (max - min) + min;
object.position.z = 0;
scene.add( object );
}
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
function onDocumentMouseWheel( event ) {
var fovMAX = 100;
var fovMIN = 1;
camera.fov -= event.wheelDeltaY * 0.05;
camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
}
document.addEventListener( 'mouseclick', onDocumentMouseClick, false );
function onDocumentMouseClick( event ) {
console.log("mouseclick! " + event.offsetX + "-" + event.offsetY, );
}
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
//// undefined:
//var controls = new THREE.DragControls( objects, camera, renderer.domElement );
//controls.addEventListener( 'dragstart', function ( event ) {
// event.object.material.emissive.set( 0xaaaaaa );
//} );
//
//controls.addEventListener( 'dragend', function ( event ) {
// event.object.material.emissive.set( 0x000000 );
//} );
</script>
</body>
</html>