Div resize not working with three.js
Three.js is an awesome library. Its well documented and its working great.
I am trying to render a plane along with trackball control inside a div.
The div resizes as the window or the browser is resized. Following is the
issue i am facing
When the browser finishes loading, the plane is displayed in the browser,
However, it is not refreshing or responding to the trackball control. But
when i minimize the browser or switch tabs the scene becomes active and it
works as designed. I am sure the trackball and the scene is working upon
load as i am able to see the changes when i refresh it by minimizing the
browser or switching tabs. I believe it has to do with rendering or
refreshing on load.
Similarly, when i resize the browser the div changes its size but the
scene goes back to the frozen state. Once again, if i minimize or switch
tabs the scene is resized and works as intended.
I am not able to figure out where the issue is.
Thanks a lot Sam
<!DOCTYPE html>
<html
lang="en">
<head>
<title>three.js
canvas
-
geometry
-
cube
</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0,
maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#Cont3D {
min-width: 200px;
min-height: 400px;
float: none;
margin-left: 20%;
margin-right: 20%;
border-width: thick;
border-style: solid;
margin-top: 100px;
}
</style>
</head>
<body>
<script
src="build/three.js"></script>
<script
src="js/loaders/STLLoader.js"></script>
<script
src="js/renderers/SoftwareRenderer.js"></script>
<script
src="js/controls/TrackballControls_Persp.js"></script>
<script
src="js/modifiers/SubdivisionModifier.js"></script>
<script
src="js/controls/OrbitControls.js"></script>
<script
src="js/libs/stats.min.js"></script>
<script
src="js/Detector.js"></script>
<script>
function startmusic() {
var container, stats;
var camera, scene, renderer;
var plane;
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var Width, Height;
init();
animate();
function init() {
container =
document.getElementById("Cont3D");
var info =
document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the
cube';
container.appendChild(info);
Width = container.clientWidth;
Height = container.clientHeight;
camera = new
THREE.PerspectiveCamera(50, Width /
Height, 1, 2000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Plane
var geometry = new
THREE.PlaneGeometry(200, 200);
geometry.applyMatrix(new
THREE.Matrix4().makeRotationX(-Math.PI
/ 2));
var material = new
THREE.MeshBasicMaterial({
color: 0xe0e0e0
});
plane = new THREE.Mesh(geometry,
material);
scene.add(plane);
//LIGHTS
hemiLight = new
THREE.HemisphereLight(0xffffff,
0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095,
1, 0.75);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);
scene.fog = new THREE.Fog(0xffffff,
3000, 10000);
scene.fog.color.setHSL(0.6, 0.87,
0.96);
spotLight = new
THREE.SpotLight(0xffffff);
spotLight.position.set(0, 1800, 0);
spotLight.target.position.set(0, 0,
0);
spotLight.castShadow = true;
scene.add(spotLight);
// RENDERER
// directional lighting
var directionalLight = new
THREE.DirectionalLight(0xffffff);
directionalLight.position =
camera.position; // .set(1, 1,
1).normalize();
scene.add(directionalLight);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(scene.fog.color,
1);
document.getElementById("logBox").innerHTML
= container.style.width + "," +
Width;
renderer.setSize(Width, Height);
container.appendChild(renderer.domElement);
controls = new
THREE.TrackballControls(camera,
renderer.domElement)
controls.rotateSpeed = .8;
controls.zoomSpeed = .7;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.6;
controls.maxDistance = 1000;
controls.minDistance = 150;
stats = new Stats();
stats.domElement.style.position =
'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
controls.addEventListener('change',
render);
container.addEventListener('resize',
onWindowResize, false);
}
function onWindowResize(event) {
Width = container.clientWidth;
Height = container.clientHeight;
document.getElementById("logBox").innerHTML
= Width + "," + Height;
camera.aspect = Width / Height;
camera.updateProjectionMatrix();
renderer.setSize(Width, Height);
controls.handleResize();
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
window.onresize = onWindowResize;
}
window.onload = startmusic;
</script>
<div
id="logBox"
style="position: absolute; top: 50px; width:
100%; text-align: center;">Blue</div>
<div
id="Cont3D">
</div>
</body>
</html>
No comments:
Post a Comment