In my latest project, I've created a straightforward three.js application that showcases a cube. The necessary files for this application include: index.html, viewer_style.css, and viewer.js.
The structure of the index.html file is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<link rel='stylesheet' type='text/css' href='viewer_style.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/renderers/Projector.js"></script>
</head>
<body>
<script src="viewer.js"></script>
</body>
</html>
Furthermore, here is the content of the viewer.js file:
// Perform Scene Setup var scene = new THREE.Scene(); ... // Display Cube with Desired Margin ... if(aspect < 1){ frustumHeight = 2 * bbox_radius; } else{ frustumHeight = 2 * bbox_radius / aspect; } camera.left = - frustumHeight * aspect / 2; ... // Implement Rendering Logic ... function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); } ... <p>To illustrate how fitting the cube works, please refer to this image:<a href="https://i.sstatic.net/4OWlI.png" rel="nofollow noreferrer"></a></p> <p>However, when modifying the camera position in <code>viewer.jsto:camera.position.x = 100; camera.position.y = 100; camera.position.z = 100;We end up with a display like this:https://i.sstatic.net/E7k50.png
Unfortunately, the cube does not fit properly on the screen in this scenario. It seems like the issue lies in measuring the bounding sphere's radius within an incorrect reference system. Despite numerous attempts, I have yet to find a viable solution.
If anyone has insight into what might be amiss or could provide guidance on employing the correct approach, your input would be greatly appreciated. Thank you!