I began to learn three.js and I need help now. I am trying set my scene in div (no in full document) without zooming, with option to scroll document by mouse wheel and zooming document. So I put it into my div and now it is there, but mouse wheel is zooming object in throughout the document and I can scroll only by arrows or scrollbar. For example I tried one of finished examples - Youtube. It is something like Cube with youtube's videos. I added there 2 more videos so it is cube now. By the way, there is one next problem. If the size of document has been changed the object begins to have absolute position and scene is in the whole 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>
Container is div where I would like to put there the object (YT Cube). CSS of this div:
div#container{
width: 350px;
height: 300px;
background-color: gray;}
And finally JS file:
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 = ['/', 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);
}
Summary: remove zooming of scene, add option to scroll document, add option to zooming document, fix view-window for scene, and if it is possible - accelerate loading
Thanks for answers
I began to learn three.js and I need help now. I am trying set my scene in div (no in full document) without zooming, with option to scroll document by mouse wheel and zooming document. So I put it into my div and now it is there, but mouse wheel is zooming object in throughout the document and I can scroll only by arrows or scrollbar. For example I tried one of finished examples - Youtube. It is something like Cube with youtube's videos. I added there 2 more videos so it is cube now. By the way, there is one next problem. If the size of document has been changed the object begins to have absolute position and scene is in the whole 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>
Container is div where I would like to put there the object (YT Cube). CSS of this div:
div#container{
width: 350px;
height: 300px;
background-color: gray;}
And finally JS file:
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./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);
}
Summary: remove zooming of scene, add option to scroll document, add option to zooming document, fix view-window for scene, and if it is possible - accelerate loading
Thanks for answers
Share asked May 22, 2016 at 19:17 SIR - 9I214SIR - 9I214 491 silver badge10 bronze badges1 Answer
Reset to default 5controls.noPan = true;
controls.maxDistance = controls.minDistance = yourfixeddistnace;
controls.noKeys = true;
controls.noRotate = true;
controls.noZoom = true;
To enable scrolling document while mouse is in the 3D scene Canvas, remove event listeners form canvas, or add function to scroll to the event listener.