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（用于动态样式更改）。最后，它只是一个canvas元素，你可以像任何其他元素一样访问它。

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

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

当然，myCanvasElement是元素引用。

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

1 个答案: