three.js のテクスチャローダーについて

Question

three.jsのテクスチャローダーの使い方を、参考サイトにて学び、真似してみようと思いました。
jsfiddleにて、下記のコードを書きましたが、テクスチャを貼った円柱が表示されません・・・・。
テクスチャを貼った円柱
上のコードで、普通の箱（コメントアウトしています）は通常通り表示されています。

  var cylinder;
  
  const loader = new THREE.TextureLoader();
	loader.crossOrigin = '*';
	loader.load('https://i.imgur.com/YHHbiu5.png',
    texture => {
        cylinder = new THREE.Mesh(
            new THREE.CylinderGeometry(1,1,10,10),
            new THREE.MeshPhongMaterial( { color: 0x0000ff,  wireframe: false , map: texture})
        )
        scene.add( cylinder );
    }
  );

が、テクスチャに関する記述です。

Answer 1

２か所ほど修正してみました。

https://jsfiddle.net/cx20/gbyk1s05/

■ カメラ位置の調整

  //camera.position.set(0, 0, +1000);
  camera.position.set(0, 0, +100);

■ レンダーループの呼び出しを追加

  //renderer.render(scene,camera);
  tick();

  // 毎フレーム時に実行されるループイベントです
  function tick() {
    renderer.render(scene, camera); // レンダリング

    requestAnimationFrame(tick);
  }  

■ 実行結果

＜参考＞
■ 簡単なThree.jsのサンプルを試そう
https://ics.media/tutorial-three/quickstart/

Comments

[justmeet0924]

ありがとうございます。僕の作ったプログラムではカメラの位置に円柱が収まってなかったってことなんですかね？助かりました。

[cx20]

レンダーループの呼び出しがなかった為、そもそも描画されていませんでした。

> カメラの位置
円柱はカメラに収まっていますが、円柱からカメラまでの距離が遠すぎるようでした。
レンダーループを追加してもとても小さく点くらいにしか表示されていなかった為、
1000→100に変更してみました。