javascript - 如何在 3D Canvas 中捕获图像以及 Logo 和文本？

Question

我是 Three js 的新手。我在 Canvas 中显示 3D 模型以及 Logo 和文本消息。当我通过 renderer.domElement.toDataURL('image/jpeg') 捕获 Canvas 时。它会给出我只模型图像，它从捕获图像中排除了 Logo 和文本。

请参阅附图。 如何捕获 3D 模型以及 Logo 和文本？

<canvas height="1024" id="stageCanvas" width="1024" style="cursor: pointer"></canvas>
<div ng-class="{'preview-gif-option1': gifImageType.type == 'Option 1'}" ng-if="gifImageType.type == 'Option 1'">
  <img ng-src="{{watermarkImage}}" ng-show="watermarkImage != null" alt="" style="height:100px;width:100px" />
  <pre>{{addressInfo.value}}</pre>
</div>

  $scope.captureJpg = function() {
  renderer.render(scene, camera);
  renderer.setSize(WIDTH / 2, HEIGHT / 2);
  rotateAngle = 0;
  rotateObject(rotateAngle);
  animate();
  $scope.captureClicked = false;
  console.log(renderer.domElement.toDataURL('image/jpeg')); 
};

Answer 1

3 个选项

1. 将 Logo 放入纹理中，在 Material 中使用纹理，将 Material 应用于平面，将平面放入场景中

   const loader = new THREE.TextureLoader();
   const tex = loader.load('path/to/logo');
   const material = new THREE.MeshBasicMaterial({map: tex});
   const geo = new THREE.PlaneBufferMaterial(width, height);
   const mesh = new THREE.Mesh(geo, material);
   scene.add(mesh);
   mesh.position.set(x, y, z); // choose an appropriate position
   

2. 创建2D Canvas ，将Three.js Canvas 绘制到2D Canvas 中，将Logo图片绘制到2D Canvas 中，在2D Canvas 上调用toDataURL

   const ctx = document.createElement('canvas').getContext('2d');
   ctx.canvas.width = widthYouWant;
   ctx.canvas.height = heightYouWant;
   ctx.drawImage(renderer.domElement, 0, 0);
   ctx.drawImage(logoImgYouAlreadyLoaded, 300, 150); // set the appropriate position
   const dataURL = ctx.canvas.toDataURL();
   

3. 使用a library用于捕获 HTML。

   请注意，在创建 THREE.WebGLRenderer 时，您需要传入 preserveDrawingBuffer: true