如何在 3D 画布中捕捉图像以及徽标和文本？答案

【问题标题】：How can capture an image along with logo and text in 3D canvas?如何在 3D 画布中捕捉图像以及徽标和文本？
【发布时间】：2020-04-17 13:00:38
【问题描述】：

我是三个 js 的新手。我在画布中显示 3d 模型以及徽标和文本消息。当我通过renderer.domElement.toDataURL('image/jpeg') 捕获画布时。它只会给我模型图像，它会从捕获图像中排除徽标和文本。

请看附图。如何捕获 3d 模型以及徽标和文字？

<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')); 
};

【问题讨论】：

你的logo、图片和文字和webgl、canvas和threejs有关系吗？
我想在三个 js 画布中添加徽标和文本。但没有成功，所以我将徽标和文本放在 div 中。我可以捕获 3d 模型的图像，但我想捕获所有 .that表示我想在捕获画布后放水印

标签： javascript three.js 3d html5-canvas webgl

【解决方案1】：

3 个选项

将徽标放入纹理中，在材质中使用纹理，将材质应用于平面，将平面放入场景中

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

创建2D画布，将three.js画布绘制到2D画布中，将logo图片绘制到2D画布中，在2D画布上调用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();

使用a library 捕获 HTML。

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

【讨论】：

【解决方案2】：

@gman 我已经尝试过你上面的代码。我可以通过调用来捕获两者

  renderer.domElement.toDataURL('image/jpeg')

但标志以 45 角显示，因为 pen 3d 模型是显示 .我已经为笔模型设置了相机和位置值为什么笔模型显示 45 度角。但我怎样才能设置两个不同相机值的几何形状？

【讨论】：

您可以尝试旋转徽标吗？
感谢 pailhead。它通过旋转徽标来工作。但是徽标会随着画布中的模型移动。那么如何修复徽标使其不会沿着模型移动？
我不知道您的层次结构是什么，但听起来将徽标从对象重新设置为场景可能会解决问题。您可以使用 lookAt() 使徽标面向相机。
您可以使用 Sprite 对象并在其上放置纹理。精灵对象将始终面向相机。 threejs.org/docs/index.html#api/en/objects/Sprite