Three.js is an incredible library that offers thorough documentation and functions perfectly.
I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering a specific issue:
Upon loading the browser, the plane is visible but does not respond to the trackball control. It only becomes active and works as expected when I minimize the browser or switch tabs. The changes are visible upon refreshing by minimizing or switching tabs, indicating that the trackball and scene are functioning correctly at load time. This issue may be related to rendering or refreshing on load.
Likewise, when resizing the browser, the div changes size but the scene remains frozen. Once again, resetting by minimizing or switching tabs allows the scene to resize and function properly.
I am struggling to identify the root cause of this issue.
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');
// Rest of the script...
}
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>