Newbie: webGL/Three.js canvas appears offset

support
1

Just starting with Hugo. Chose the tranquilpeak theme and am simply trying to place a webGL/Three.js canvas on a page, but it appears with a 2D offset:

offset
offset.jpg856×916 73.9 KB

I simply put three.js in static/js and put this in my second post’s markdown. Fairy straight forward and blunt; what’s causing the offset?

<div id="webGlDiv" style="
  background-color: #FFF;
  width:  600px;
  height: 600px;
  border: 1px solid black;"/>

<script src="/js/three.js"></script>
<script>
			var camera, scene, renderer;
			var mesh;
			init();
			animate();
			function init() {
				var bsjnk = 600;
				camera = new THREE.PerspectiveCamera( 70, bsjnk / bsjnk, 1, 1000 );
				camera.position.z = 400;
				scene = new THREE.Scene();
				var texture = new THREE.TextureLoader().load( '/images/tex.jpg' );
				var geometry = new THREE.BoxBufferGeometry( 225, 225, 100 );
				var material = new THREE.MeshBasicMaterial( { map: texture } );
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
				var webGlCanvas = document.getElementById( 'webGlDiv' );
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( bsjnk, bsjnk );
				webGlCanvas.appendChild( renderer.domElement );
				//
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
			}
			function animate() {
				requestAnimationFrame( animate );
				mesh.rotation.x += 0.005;
				mesh.rotation.y += 0.01;
				renderer.render( scene, camera );
			}

</script>
2

Hugo will simply build the page how you specify, so this is something to do with the interaction between the javascript you’re running, the way you styled the div, and the template html, not hugo per se. I would say: look at your source and play with the margin and padding settings.

1 Like
3

That’s what I thought too, but as I try to adjust them, something is making adjustments opposite, or against my adjustments. The same markup on a plain HTML page does not show the offset. So I’m asking. Something theme, somehow? I notice I set the div and three canvas to be 600 pixels w,h, yet the canvas appears as 750 w,h. Inspecting, I don’t see what’s setting that.

4

Hmmm… If I get rid of the border, the offset goes away.