I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content.
While scrolling outside the canvas works fine, using OrbitControls inside the canvas only affects zooming along the z-axis of the 3D scene without scrolling the entire page. My goal is to achieve seamless scrolling between the canvas and the page content so that scrolling inside the canvas also scrolls the entire page, and vice versa.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0x000000, 0 );
document.body.appendChild(renderer.domElement);
scene.background = null;
document.getElementById('canvas').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate(); body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
#container {
position: relative;
width: 100%;
height: 100vh;
overflow-y: auto;
perspective: 1000px;
}
canvas {
position: fixed;
top: 0px;
left: 0px;
z-index: 999999;
width: 100vw;
height: 100vh;
}
.content {
padding: 20px;
}<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Example</title>
</head>
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
<!-- Add more content here -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</body>
</html>