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') });

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

2 个答案: