Three.js備忘録（4）

renderer.outputEncoding = THREE.sRGBEncoding; // レンダラーの出力をsRGB色空間に設定。
renderer.toneMapping = THREE.ACESFilmicToneMapping; // トーンマッピングをACESFilmicに設定。
renderer.toneMappingExposure = 2; // トーンマッピングの露光量を調整。

// HDRファイルのロードを開始。
const loader = new RGBELoader();
loader.load(
  "image.hdr", // 実際のHDRイメージのパスに置き換える。
  (texture) => {
    texture.encoding = THREE.RGBEEncoding; // テクスチャのエンコーディングをRGBE形式に設定。
/*
テクスチャマッピングを矩形反射マッピングに設定
＊テクスチャマッピングについては環境マップの使用例を参照
*/
    texture.mapping = THREE.EquirectangularReflectionMapping; 
    scene.background = texture; // ロードしたテクスチャをシーンの背景として設定。
    scene.environment = texture; // ロードしたテクスチャを環境マップとしても設定
  },
  (xhr) => {   // ローディングの進行状況をハンドルできる
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  (error) => { // エラーハンドリング用のコールバック
    console.error('An error happened while loading the HDR texture:', error);
  }
);

//６枚の画像から球面マッピング
const reflectionTexture = new THREE.CubeTextureLoader()
  .setPath('path/to/textures/')
  .load([
    '1.jpg', '2.jpg',
    '3.jpg', '4.jpg',
    '5.jpg', '6.jpg'
  ]);
material.envMap = reflectionTexture;
material.envMap.mapping = THREE.SphericalReflectionMapping;

const loader = new RGBELoader();
loader.load(
  "ファイルパス",
  (texture) => {
    texture.encoding = THREE.RGBEEncoding;
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    /*シーンに環境マップを設定する場合
    scene.environment = texture;*/
    const sphere = new THREE.Mesh(
      new THREE.SphereGeometry(0.3, 50, 50),
      new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 0.8,
        color: 0xffea00,
　　　　//オブジェクトに環境マップを設定する場合
        envMap: texture,
      })
    );
    scene.add(sphere);
  }
);

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);
  }
});

const renderer = new THREE.WebGLRenderer({ antialias: true });
//高ピクセル比のデバイスではパフォーマンスの問題が発生するので2に制限する
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

import { GroundProjectedSkybox } from 'three/addons/objects/GroundProjectedSkybox.js'

const rgbeLoader = new RGBELoader();
rgbeLoader.load('/path/to/your/hdr/image.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture; // 環境マップをシーンにセット
 
  // GroundProjectedSkyboxをシーンに追加
  const groundProjectedSkybox = new GroundProjectedSkybox(texture);
  groundProjectedSkybox.scale.setScalar(20); // 必要に応じてスケールを調整
  scene.add(groundProjectedSkybox);
  groundProjectedSkybox.radius = 100 // 必要に応じて調整
  groundProjectedSkybox.height = 10 // 必要に応じて調整

  // 環境マップをマテリアルにセット
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    roughness: 0.5,
    metalness: 0.8,
    color: 0x00ffff,  
    envMapIntensity: 1,
    envMap: texture,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  // 既存のcubeのマテリアルを更新
  cube.material = material;
});

 <progress id="progressbar" value="" max="100"></progress>

const progressBar = document.querySelector('#progressbar');

//読み込み中に呼び出されるコールバック関数内で
  (xhr) => {
   progressBar.value = (xhr.loaded / xhr.total) * 100;
  },

//複数のローダーでハンドリング
const manager = new THREE.LoadingManager();
// テクスチャローダー
const textureLoader = new THREE.TextureLoader(manager);

// GLTFモデルローダー
const gltfLoader = new THREE.GLTFLoader(manager);

manager.onProgress = function (url, loaded, total) {
    progressBar.value = (loaded / total) * 100;
};

//完了後
//プログレスバーを非表示にする
progressBar.style.display = "none";

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
const loader = new GLTFLoader();
loader.load(
  'ファイルパス',
  (gltf) =>{
    //gltf.sceneは、シーングラフでモデルのルートノードに相当
    const root = gltf.scene
    console.log(root)   
    scene.add(root);
  });

const loader = new GLTFLoader();
loader.load(
  'ファイルパス',
  (gltf) =>{
    scene.add(gltf.scene);
   //getObjectByNameでノードを取得
    root.getObjectByName('Cube_1_0').material.color.set(0xffff00)
  }
);

//個々に追加 
const m1 = gltf.scene.children[0];
const m2 = gltf.scene.children[1];
scene.add(m1);
scene.add(m1);

//childrenをループする場合はforループやforEachは使わない
while(gltf.scene.children.length){
    scene.add(gltf.scene.children[0])
}

//別の配列を作成してその配列をループ
const children = [...gltf.scene.children]
for(const child of children){
    scene.add(child)
}

const loader = new THREE.GLTFLoader();
loader.load('ファイルパス', (gltf) => {
  const model = gltf.scene;
  model.traverse((object) => {
    if (object.isMesh) {
      // マテリアルを変更
      object.material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    }
  });
  scene.add(model);
});

scene.traverse((child) => {
  console.log(child)
})

const mtlLoader = new MTLLoader();
const objLoader = new OBJLoader();
mtlLoader.load('hoge.mtl', (materials) =>{
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.load('hoge.obj', (object) =>{
    scene.add(object);
  });
},);

const material = new THREE.MeshLambertMaterial({ color: 0x5c3a21 });
objLoader.load(
  "hoge.obj",
  (object) => {
    object.traverse((child) => {
      if (child instanceof THREE.Mesh) {
　　　　//法線の情報がない場合
       child.geometry.computeFaceNormals();
       child.geometry.computeVertexNormals();
　　　　//マテリアルの設定
       child.material = material;
      }
    });
    scene.add(object);
  })