是否可以设置由 Three.js 自动生成的画布的样式/位置？

Question

我一直在关注 Three.js 的在线教程，该教程会生成旋转的 3D 立方体。我在脚本文件中使用了以下 JavaScript：

function spin() {
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth/2, window.innerHeight/2);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial( { color: 0xffff00});
  var cube = new THREE.Mesh(geometry, material);

  camera.position.z = 5;
  scene.add(cube);

  var render = function(){
  requestAnimationFrame(render);

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  render();
}

目前，这会在黑色背景上生成一个旋转的黄色立方体。我可以看到可以更改画布的大小（使用 renderer.setSize()），但是是否可以在页面上重新定位它（或添加其他样式，例如透明背景）？例如，将其放置在其他元素周围。

我认为也许可以创建自己的画布并在此画布上创建立方体，而不是使用由 Three.js 生成的画布，这可能吗？

Answer 1

两种方式都可以，都使用 CSS（用于静态样式）或 JS（用于动态样式更改）。最后，它只是一个画布元素，您可以像任何其他元素一样访问它。

您可以将自己的画布传递给渲染器，如下所示：

new THREE.WebGLRenderer({ canvas: myCanvasElement });

myCanvasElement当然，元素引用在哪里。