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

【问题标题】：Is it possible to style/position the canvas that is generated automatically by three.js?是否可以设置由three.js 自动生成的画布的样式/位置？
【发布时间】：2016-07-13 10:24:32
【问题描述】：

我一直在关注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生成的那个，这可能吗？

【问题讨论】：

标签： javascript css canvas three.js

【解决方案1】：

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

您可以像这样将自己的画布传递给渲染器：

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

当然，myCanvasElement 是元素引用。

【讨论】：