Contents appear off center on my canvas

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">
                        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;
                            }, 500);
                        <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);

                            // 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;
                   = - d;
                   = d;
                   = d;
                   = - d;
                   = 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;
                            // Render Loop
                            var render = function () {
                            requestAnimationFrame( render );
                            renderer.render(scene, camera);
                            //end canvas script


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:

Is there a link to the web page in the Internet?

I’m not sure the way you resize your canvas is correct. As @prisoner849 said, please provide a live demo. Use this fiddle as a start template.

It should be renderer.setPixelRatio( window.devicePixelRatio );. devicePixelRatio is a property of window.

Thanks for the reply prisoner849 and Mugen87!
I only have this on my local machine at the moment. Having trouble uploading to fiddle and getting anything other than basic page layout and black canvas back ground to show. Still Trying.

also commenting out the
//renderer.setPixelRatio( canvas.devicePixelRatio );

has no effect on the issue.

Changing it to window. device… Changing to 'window.devicePixelRatio… only makes the canvas look like this:

Page code, layout etc… seems to work fine when resizing etc… just can get the canvas content height to center. Makes me think its something I have wrong in the Three.js code.

Can you explain the logics of how you do the resize of the canvas? Did I get it correctly, that you call the function for resize every a half of a second?
Have a look at this answer on Stackoverflow (the fourth example in the answer):

1 Like

Yes, but canvas.devicePixelRatio is no valid argument. You apply undefined to .setPixelRatio().

Mugen87, thanks for you patience with me on the .sePixelRatio. I understand now and have corrected the code.

Thanks for your help!


Thanks so much for your help. My logic was in questions hence my initial question. After viewing sample code 4 from the link you provided I understood I was writing too much code.

I scratched most of my code and followed your example as the basic template and now all is working as shown below:

Thanks so much for your time and help. You guys are great!

1 Like

You’re welcome :beers: :wink: