有沒有辦法在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文件中創建一個canvas元素，並通過CSS

改變其屬性和畫布傳遞給WebGLRenderer像

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