Question

如何知道三个js素材渲染完成？

我没有纹理网址，我只有一个canvas元素。
这不是关于加载纹理，而是关于渲染纹理。

material.map = new THREE.Texture( canvas ); 
material.map.needsUpdate = true;

所以我想做点什么，因为如果不是那么它是完整的快照有时是黑色的结果

var snapshotData = renderer.domElement.toDataURL(strMime);

什么可以成功渲染材质回调？

抱歉我的英语不好。其实我不是关于加载texturePath，而是关于渲染纹理。我真正想要的是如何知道渲染纹理何时完成。

例如，纹理已加载但尚未在网格中呈现。什么可以成功渲染材料回调？

谢谢你的帮助。

Answer 1

three.js中的材质在渲染场景中使用时会更新。您可以随时使用

渲染场景

renderer.render(someScene, someCamera);

至于呼叫toDataURL并变黑看到这些答案

https://stackoverflow.com/a/32641456/128511

https://stackoverflow.com/a/26790802/128511

虽然你应该能够做到这一点

renderer.render(someScene, someCamera);
var snapshotData = renderer.domElement.toDataURL(strMime);

如果纹理基于画布，则只要您调用renderer.render(...)，它就可用。

"use strict";

var renderer = new THREE.WebGLRenderer();

var camera = new THREE.PerspectiveCamera(70, 300/150, 1, 1000);
camera.position.z = 75;
var scene = new THREE.Scene();

var geometry = new THREE.BoxGeometry(50, 50, 50);

var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 128;
ctx.canvas.height = 128;

ctx.fillStyle = "red";
ctx.fillRect(0, 0, 128, 128);
ctx.beginPath();
ctx.arc(64, 64, 40, 0, Math.PI * 2, true);
ctx.lineWidth = "10";
ctx.strokeStyle = "yellow";
ctx.stroke();

var texture = new THREE.Texture(ctx.canvas);
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial({
  map: texture,
});

var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = 45;
mesh.rotation.x = Math.PI * .2;
scene.add(mesh);

renderer.render(scene, camera);
var img = new Image();
img.src = renderer.domElement.toDataURL();
document.body.appendChild(img);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

请注意，默认情况下，在three.js中，您只能使用1个纹理的画布。如果要为2个纹理使用画布，则每个纹理需要1个画布，或者需要手动强制Three.js更新纹理。 See this answer

我真正想要的是如何知道渲染纹理何时完成

1 个答案: