スプライトが表示されない

Question

私は描画しようとしているスプライトを表示しないhttps://jsfiddle.net/72mnd2yt/1/にコードがあります。私はhttps://stemkoski.github.io/Three.js/Sprite-Text-Labels.htmlでコードを実行しようとしましたが、それを一行ずつ読みましたが、どこが間違っているのか分かりません。誰かがそれを見て気になりますか？

// picture 
var getPicture = function(message){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = "100%"; 
    canvas.height = "100%"; 

    var context = canvas.getContext('2d'); 
    context.font = "10px"; 
    context.fillText(message, 0, 10); 
    var picture = canvas.toDataURL(); 
    // return picture; 
    return canvas; 
}; 

// let there be light and so forth... 
var getScene = function(){ 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(
    70, 
    $('body').width(), 
    $('body').height(), 
    1, 
    1000 
); 

    var light = new THREE.PointLight(0xeeeeee); 
    scene.add(camera); 
    scene.add(light); 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0xefefef); 
    renderer.setSize($('body').width(), $('body').height()); 

    camera.position.z = -10; 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 

    return [scene, renderer, camera]; 
}; 

// now for the meat 
var getLabel = function(message){ 
    var texture = new THREE.Texture(getPicture(message)); 
    var spriteMaterial = new THREE.SpriteMaterial(
    {map: texture } 
); 
    var sprite = new THREE.Sprite(spriteMaterial); 
    //sprite.scale.set(100, 50, 1.0); 
    return sprite 
}; 

var setup = function(){ 
    var scene; 
    var renderer; 
    var camera; 
    [scene, renderer, camera] = getScene(); 
    $('body').append(renderer.domElement); 

    var label = getLabel("Hello, World!"); 
    scene.add(label); 

    var animate = function(){ 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
    }; 

    animate(); 
}; 


setup(); 

Answer 1

いくつかのポイント：

1）canvas.width = "100%"（キャンバスサイズはピクセルであると仮定される）canvas.width = "100"なければならない。ここで

は、いくつかの関連するコードです。 canvas.heightと同じです。

2）$('body').height()は0なので、レンダラーキャンバスは表示されません（デベロッパーツールでこれを確認できますが、それは要素ツリーにありますが、高さが0pxになっています）。私はjQueryについて何も知らないので、なぜこれがどういうわけかは分かりませんが、とにかく代わりにwindow.innerHeightとwindow.innerWidthを使うことをお勧めします。だからrenderer.setSize(window.innerWidth, window.innerHeight)。また、カメラの初期設定でこの変更を行う必要があります。

3）カメラの初期化といえば、アスペクト比の引数のみが必要な場合は、幅と高さを別々の引数として渡しています。 See the docs。だから、
var camera = new THREE.PerspectiveCamera(70, window.innerWidth, window.innerHeight, 1, 1000)
が
var camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000)

4となります）テクスチャが静的であると仮定されているので、あなたがこの部分に何かを追加する必要があります。

var texture = new THREE.Texture(getPicture(message)) 
texture.needsUpdate = true // this signals that the texture has changed 

ワンタイムフラグですので、あなたが必要とすること動的なテクスチャが必要な場合は、キャンバスが変更されるたびに設定してください。毎回新しいTHREE.Textureを作成する必要はありません。レンダーループにtexture.needsUpdateを追加するだけです（または、効率を上げるためにテクスチャを変更する場合にのみ発生するイベントで）。 See the docs、.needsUpdate以下。

---

この時点で動作するはずです。

5）Textureの代わりに、CanvasTextureを使用して.needsUpdateを設定することができます。あなたが投稿したフィドルはThree.js r71を使用していますが、これは持っていませんが、新しいバージョンではあります。それは次のようになります。

var texture = new THREE.CanvasTexture(getPicture(message)); 
// no needsUpdate necessary 

6）既にコメントアウトreturn pictureに基づいて、このパス上にあったように見えますが、あなたはcanvas要素、またはテクスチャのためにキャンバスから生成されたデータのURLのいずれかを使用することができます。 getPictureは現在、データのURLを返す場合、これを試してみてください。

var texture = new THREE.TextureLoader().load(getPicture(message)) 

あなたはまた、間接的にTextureとデータのURLを使用することができます。

var img = document.createElement('img') 
var img = new Image() 
img.src = getPicture(message) 
var texture = new THREE.Texture(img); 
texture.needsUpdate = true 

ない場合は、単に両方がかかります、TextureまたはCanvasTextureにこだわりますキャンバス要素。 Textureは、srcがデータURLに設定されている画像要素を渡すことによって間接的にURLを取得できます。

---

概説修正をいじる： https://jsfiddle.net/jbjw/x0uL1kbh/