Есть ли способ сделать небольшой холст в Three.js?

Question

Я хочу реализовать сцену three.js на своем веб-сайте. Я сделал это, и вы можете просто перетащить, чтобы повернуть объект. Во всяком случае, я не хочу, чтобы он заполнил всю мою веб-страницу. Я изменить параметры для поля, оказанной:

renderer.setSize(400,400); 

, но вы все еще можете перетаскивать в любом месте на веб-странице и повернуть объект. Итак, вы не можете, например, скопировать часть текста обычным способом. Хорошим примером является этот сайт. http://davidscottlyons.com/threejs/presentations/frontporch14/index.html#slide-68

Такая же проблема. Просто попробуйте скопировать заголовок - вы просто немного повернете мяч.

Спасибо!

Answer 1

Предполагая, что вы используете TrackballControls, когда вы строите объект TrackballControls, поставьте в качестве второго аргумента элемент контейнера, для которого вы хотите захватить события мыши. Если вы не укажете второй аргумент, вы получите события мыши для всего документа.

Вот пример:

// 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

Вы можете создать брезентовый элемент в вашем HTML-файл и изменить его атрибуты через CSS

и передать этот холст WebGLRenderer как

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