Three.js備忘録（2）

const loader = new THREE.TextureLoader();
loader.load(
  'ファイルのパス',
  //読み込みが完了したときに呼び出されるコールバック関数
  function (geometry, materials) {
    // ロード完了時の処理
  },
  // 読み込み中に呼び出されるコールバック関数
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '%');
  },
  // 読み込みエラー時に呼び出されるコールバック関数
  function (error) {
    console.error(error);
  }
);

const loader = new THREE.TextureLoader();
const texture = loader.load('ファイルパス');
//シーンのbackground
scene.background = texture;
//マテリアルでテクスチャを使用
const material = new THREE.MeshBasicMaterial({
  map: texture,
});

loader.load('ファイルパス', (texture) => {
  const material = new THREE.MeshBasicMaterial({
    map: texture,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
});

const loadManager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadManager); 
//6つのマテリアルの配列
const materials = [
  new THREE.MeshBasicMaterial({map: loader.load('1.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('2.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('3.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('4.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('5.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('6.jpg')}),
]; 
loadManager.onLoad = () => {
  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);
};

const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load([
    'ファイルパス',
    'ファイルパス',
    'ファイルパス',
    'ファイルパス',
    'ファイルパス',
    'ファイルパス'
]);

const loader = new THREE.TextureLoader();
loader.load(
   'ファイルパス',
  (texture) => {
    const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
    rt.fromEquirectangularTexture(renderer, texture);
    scene.background = rt.texture;
    //キューブ
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({
      roughness: 0.5,
      metalness: 0.2,
      color: 0x00ffff,  
      envMapIntensity: 1, // 環境マップの反射強度
      envMap: texture,   //反射マッピング
    });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
  }
});

texture.wrapS = THREE.RepeatWrapping;

texture.repeat.set(水平方向に繰り返す回数, 垂直方向に繰り返す回数);

texture.offset.set(xOffset, yOffset);

texture.center.set(.5, .5);
//45 * Math.PI / 180
texture.rotation = THREE.MathUtils.degToRad(45);

const loader = new THREE.FontLoader();
loader.load('./helvetiker_regular.typeface.json', (font) => {
  const textGeometry = new THREE.TextGeometry('three.js', {
    font: font,
    size: 0.5, 
    height:0.1
  });
  const textMaterial = new THREE.MeshBasicMaterial({color:0xffffff});
  const text = new THREE.Mesh(textGeometry, textMaterial);
  scene.add(text);
});

//空のノード
const parent = new THREE.Group();
scene.add(parent);

//parentに物体を追加
parent.add(物体);

npm install lil-gui --save-dev

import GUI from 'lil-gui'

import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@0.18/+esm';

<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.18"></script>
<script>
  const GUI = lil.GUI
</script>

const gui = new GUI();
obj = {
	myBoolean: true,
	myNumber: 1,
	myFunction: function() { alert( 'hi' ) },
	myColor: '#ffffff',
}
//コントロールパネルに表示を追加
gui.add( obj, 'myBoolean' ); 	// チェックボックス
gui.add( obj, 'myNumber' 0, 100, 10 ); //数字 (最小値,最大値,間隔）
gui.add( obj, 'myFunction' ); 	// ボタン
gui.addColor( obj, 'myColor' ); //カラー ピッカー

const folder = gui.addFolder( 'Position' );
folder.add( obj, 'x' );

gui.add( params, 'foo' ).onChange( value => {
	console.log( value );
} );

const rtWidth = 1000;
const rtHeight = 1000;
const renderTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight);

const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5);
rtCamera.position.z = 2;
 
const rtScene = new THREE.Scene();
rtScene.background = new THREE.Color('red');

renderer.setRenderTarget(renderTarget);
renderer.render(rtScene,rtCamera);
renderer.setRenderTarget(null);

const material = new THREE.MeshPhongMaterial({
  map: renderTarget.texture,
});