CODEWITHSUNDEEP
javascripthtmlcsscanvasthree.js
stefano
stefano

Reputation: 123

Threejs canvas doesn't resize into tag div

I have put my tag canvas into a div, for Bootstrap layout, but the canvas is bigger than the div container and it doesn't resize itself to the div size. I can't understand what is the reason. Live example: http://www.felpone.netsons.org/web-threejs/

<div class="row">


<div class="col-sm-8" style="background-color:lavenderblush;" id="ThreeJS" data-toggle="context" data-target="#context-menu"></div>



<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>



</div>



#ThreeJS canvas {

position: static!important;
padding: 1px!important;
margin: 1px!important;
background-color: rgba(188, 188, 188, 0.44)!important;

 }

and this is my threejs code:

var SCREEN_WIDTH = window.innerWidth-5, SCREEN_HEIGHT = window.innerHeight-5;

    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.01, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    var r = 4, phi = Math.PI/4, theta = Math.PI/4;
    camera.position.set(r*Math.cos(phi)*Math.sin(theta),r*Math.sin(phi), r*Math.cos(phi)*Math.cos(theta));

    // RENDERER
    if ( Detector.webgl )
            renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
            renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.autoClear = false;

    // CONTAINER
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );

    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

    // CONTROLS
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    controls.target = new THREE.Vector3(0, 0, 0);

Upvotes: 3

Views: 1817

Answers (2)

Ashutosh Kumar
Ashutosh Kumar

Reputation: 9

The reason of overflow is simple, you have given the canvas dimension to fill/cover the whole webpage (in your js code).

Your webpage has two columns layout that ratio is 8:4. Left side of your column (.col-sm-8) contains canvas HTML element. so, it can contain the wider element than it self. ( your js code has been declared setSize(window.innerWidth,window.innerHeight).

just implement this CSS to your code.

canvas{
width: 100%
height: <set as you want eg. 50% or 100% of its parent container>
}

This will help to fit your canvas.

Upvotes: 0

Mouloud85
Mouloud85

Reputation: 4234

You set your renderer size (= your canvas) at (window.innerWidth-5)/(window.innerHeight-5), almost full page. First define container before SCREEN_WIDTH and SCREEN_HEIGHT, then replace them with : 

var containerStyle = getComputedStyle(container,null);
var SCREEN_HEIGHT = parseInt(containerStyle.getPropertyValue('height')),
    SCREEN_WIDTH = parseInt(containerStyle.getPropertyValue('width'));

Same in THREEx.WindowResize function : find where height and width are defined, and replace them with those values.

Upvotes: 2

Related Questions