有没有办法在 Three.js 中制作小画布？答案

【问题标题】：Is there a way to make small canvas in Three.js?有没有办法在 Three.js 中制作小画布？
【发布时间】：2016-04-14 18:20:27
【问题描述】：

我想在我的网站中实现一个 three.js 场景。我已经完成了，您只需拖动即可旋转对象。无论如何，我不希望它填满我的整个网页。我确实更改了渲染字段的参数：

renderer.setSize(400,400);

但您仍然可以拖动网页上的任意位置并旋转对象。所以 - 例如，您不能以通常的方式复制一段文本。这个网站就是一个很好的例子。 http://davidscottlyons.com/threejs/presentations/frontporch14/index.html#slide-68

同样的问题。只需尝试复制标题 - 您只需将球旋转一点。

谢谢！

【问题讨论】：

标签： javascript html css three.js

【解决方案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);

【讨论】：

谢谢，但它只适用于放大和缩小！我现在不能拖动和旋转对象:(

【解决方案2】：

您可以在 HTML 文件中创建一个 canvas 元素并通过 css 更改其属性

然后像

一样将该画布传递给 WebGLRenderer

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

【讨论】：