有没有办法在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') });