是否可以对three.js自动生成的画布进行样式化/定位

Is it possible to style/position the canvas that is generated automatically by three.js?

本文关键字：布进行 样式 定位 自动生成 three js 是否      更新时间：2023-09-26

我一直在学习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生成的立方体，这可能吗？

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

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

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

其中myCanvasElement当然是元素参考。

相关文章：