本当に欲しいのは、テクスチャのレンダリングが完了したときを知る方法です。

Question

レンダリングされた3つのjsマテリアルを知る方法は？

1. テクスチャURLがありません。キャンバス要素のみがあります。
2. テクスチャの読み込みではなく、テクスチャのレンダリングについてです。

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

いない場合、それは完全なスナップショットであるため、私は何かをしたい成功した材料のコールバックをレンダリングしないことができる何いつか黒結果

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

のですか？

私の悪い英語のために申し訳ありません。実際には、texturePathの読み込みではなく、テクスチャのレンダリングについてです。私が本当に欲しいのは、テクスチャのレンダリングが終了したときを知る方法です。

たとえば、テクスチャは既に読み込まれていますが、まだメッシュでレンダリングされていません。何が正常にマテリアルコールバックをレンダリングすることができますか？

あなたのお役に立てていただきありがとうございます。

Answer 1

レンダリングされたシーンで3つの素材が使用されると、3つの素材が更新されます。あなたはこれらの答えあなたがこの

を行うことができるはずのに

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

効果的

https://stackoverflow.com/a/32641456/128511参照toDataURLを呼び出すと黒の取得のためとして

renderer.render(someScene, someCamera); 

でいつでもシーンをレンダリングすることができます

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