时间戳

首页 > 解决方案 > 如何在 3D 画布中捕捉图像以及徽标和文本？

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

问题描述

在此处输入图像描述 我是三个 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')); 
};

标签： javascriptthree.js3dhtml5-canvaswebgl

解决方案

3个选项

  1. 将徽标放在纹理中，在材质中使用纹理，将材质应用到平面，将平面放在场景中

    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画布，将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();

  3. 使用库来捕获 HTML。

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

推荐阅读