Hi, I’m having trouble with my contents appearing almost off screne in my canvas. I’m very new to three.js and would appreciate any feedback on what I might be doing wrong. I apologize if my code is sloppy. I’ve been trying all kinds of things to get my content to center. Code and screen shots follow. Thanks in advance for any insights you can share.
Here’s my HTML including the three.js script
<canvas id="canvas">
<script>
function onResize(element, callback) {
var height = element.clientHeight;
var width = element.clientWidth;
return setInterval(function() {
if (element.clientHeight != height || element.clientWidth != width) {
height = element.clientHeight;
width = element.clientWidth;
callback();
}
}, 500);
}
</script>
<script> //main canvas script
var canvas = document.getElementById('canvas');
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
renderer.setPixelRatio( canvas.devicePixelRatio );
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
// Set Scene Camera and Renderer
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcce0ff );
var camera = new THREE.PerspectiveCamera( 60, canvas.width/canvas.height, 0.1, 2000 );
camera.position.set(5 * -1.25, 5, 5 * 1.25);
var controls = new THREE.OrbitControls( camera, canvas );
//blue box geometry from resize sample
var geometry = new THREE.BoxGeometry( 5, 5, 5 );
var material = new THREE.MeshPhongMaterial({ color: 0x1C4A8C });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// lights mine
var light, materials;
scene.add( new THREE.AmbientLight( 0x666666 ) );
light = new THREE.DirectionalLight( 0xdfebff, 1 );
light.position.set( 50, 200, 100 );
light.position.multiplyScalar( 1.3 );
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
var d = 300;
light.shadow.camera.left = - d;
light.shadow.camera.right = d;
light.shadow.camera.top = d;
light.shadow.camera.bottom = - d;
light.shadow.camera.far = 1000;
scene.add( light );
//Resize div window function
onResize(canvas, function () {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
renderer.setViewport(0, 0, canvas.width, canvas.height);
camera.aspect = canvas.width / canvas.height;
camera.updateProjectionMatrix();
});
// Render Loop
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
//end canvas script
</script>
</canvas><!--canvas-->
My CSS for the canvas which is inside the model div also show below:
#canvas {
padding: 0px;
background-color: #000;
margin: 0;
height: 100%;
width: 100%;
border: 1px solid #cccccc;
overflow-y: auto;
overflow-x: auto;
}
#model {
background-color: #fff;
height: calc(100% - 127px);
padding: 15px;
width: 100%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
overflow: hidden;
}
Here is a screen shot showing only the top of the box geometry in the bottom of the canvas window.
As I resize the window to a smaller height the box comes into view completely as shown here:
