Is there a way to make small canvas in Three.js?

Question

I want to implement a three.js scene in my website. I have it done and you can simply drag to rotate an object. Anyway, I don't want it to fill my whole webpage. I did change the parameters for the field that is rendered:

renderer.setSize(400,400);

but you can still drag anywhere at the webpage and rotate the object. So - you can't for example copy a piece of text of it the usual way. A good example is this website. http://davidscottlyons.com/threejs/presentations/frontporch14/index.html#slide-68

Same problem. Just try copying the title - you will just rotate the ball a bit.

Thanks!

Answer 1

Assuming that you are using TrackballControls, when you construct the TrackballControls object, supply as the second argument the container element for which you want to capture mouse events. If you don't supply the second argument, you will get mouse events for the entire document.

Here is an example:

// Find the document element that will host the canvas.
var container = document.getElementById("viewContainer");

// Add canvas to the document element.
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(targetWidth, targetHeight );
renderer.setClearColor(0xededed, 0)
container.appendChild(renderer.domElement);

// Control for pan, zoom, rotate.
controls = new THREE.TrackballControls(camera, container);

Answer 2

You can create a canvas element in your HTML file and change its attributes through css

and pass that canvas to WebGLRenderer like

renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas : document.getElementById('your canvas element id') });