Recently, I started learning about three.js and currently find myself in need of some assistance. My goal is to set up my scene within a div element rather than the entire document without any zooming while still allowing the user to scroll using the mouse wheel and zoom into the document. I managed to place it inside my div element, but the issue I am facing now is that the mouse wheel zooms the object throughout the entire document, making scrolling only possible through arrows or scrollbar navigation. To illustrate this problem further, I tried working with an existing example involving a Cube with Youtube videos embedded in it. Adding two more videos turned it into a cube as expected. However, another challenge arose when the size of the document changed, causing the object to assume an absolute position and rendering the scene across the entirety of the document.
<!DOCTYPE html>
<html lang="sk-SK">
<head><meta charset="UTF-8"><title>Test</title>
<script type="text/javascript" src="/kla/script/lib/three.js/build/three.js"></script>
<script type="text/javascript" src="/kla/script/lib/three.js/controls/TrackballControls.js"></script>
<script type="text/javascript" src="/kla/script/lib/three.js/renderers/CSS3DRenderer.js"></script>
</head><body>
...
<section>
<div id="container"></div>
<div id="blocker"></div>
</section>
...
<script type="text/javascript" src="js/youtubeCube.js"></script>
</body></html>
The container represents the div where I intend to place the YT Cube object. Here's the CSS styling for this div:
div#container{
width: 350px;
height: 300px;
background-color: gray;}
Lastly, here's the JS file content:
var camera, scene, renderer;
var Element = function(id, x, y, z, ry, rx)
{
var div = document.createElement('div');
div.style.width = '480px';
div.style.height = '480px';
div.style.backgroundColor = '#000';
var iframe = document.createElement('iframe');
iframe.style.width = '480px';
iframe.style.height = '480px';
iframe.style.border = '0px';
iframe.src = ['http://www.youtube.com/embed/', id, '?rel=0'].join('');
div.appendChild(iframe);
var object = new THREE.CSS3DObject(div);
object.position.set(x,y,z);
object.rotation.y = ry;
object.rotation.x = rx;
return object;
};
init();
animate();
function init()
{
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 5000);
camera.position.set(500,350,750);
scene = new THREE.Scene();
renderer = new THREE.CSS3DRenderer();
renderer.setSize(document.getElementById('container').offsetWidth, document.getElementById('container').offsetHeight);
renderer.domElement.style.position = 'relative';
renderer.domElement.style.top = 0;
container.appendChild(renderer.domElement);
var group = new THREE.Group();
group.add(new Element('', 0, 0, 240, 0, 0));
group.add(new Element('', 240, 0, 0, Math.PI/2, 0));
group.add(new Element('', 0, 0, -240, Math.PI, 0));
group.add(new Element('', -240, 0, 0, -Math.PI/2, 0));
group.add(new Element('', 0, 240, 0, 0, -Math.PI/2));
group.add(new Element('', 0, -240, 0, 0, Math.PI/2));
scene.add(group);
controls = new THREE.TrackballControls(camera);
window.addEventListener('resize', onWindowResize, false);
var blocker = document.getElementById('blocker');
blocker.style.display = 'none';
document.addEventListener('mousedown', function(){blocker.style.display = '';});
document.addEventListener('mouseup', function(){blocker.style.display = 'none';});
}
function onWindowResize()
{
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate()
{
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
To summarize: - Disable zooming in the scene - Enable document scrolling - Implement document zoom functionality - Fix the view window for the scene - Optionally, aim to improve loading speed if feasible
Thank you in advance for any assistance provided!