Three.js備忘録（4）

//６枚の画像から球面マッピング
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;

import { RGBELoader } from "three/addons/loaders/RGBELoader.js";
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 2;
const loader = new THREE.RGBELoader();
loader.load('ファイルパス', (texture) => {
  // 読み込みが完了したら、テクスチャを取得するコールバック関数を実行する
});

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

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

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

//リソースが1つの場合loadメソッドのハンドリング
//読み込み中に呼び出されるコールバック関数内で
  (xhr) => {
   progressBar.value = (xhr.loaded / xhr.total) * 100;
  },

//複数ソースでLoadingManagerのハンドリング
// 1つのリソースの読み込みが完了したときに呼び出される関数内で
loadManager.onProgress = function (url, loaded, total) {
    progressBar.value = (loaded / total) * 100;
};

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

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 rgbLoader = new RGBELoader();
const gltfLoader = new GLTFLoader();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 2;
rgbLoader.load(
    "hoge.hdr",
    (texture) => {
      texture.encoding = THREE.RGBEEncoding;
      texture.mapping = THREE.EquirectangularReflectionMapping;
      scene.environment = texture;
      gltfLoader.load(
        'hoge.gltf',
        (gltf) =>{
          scene.add(gltf.scene);
        }
      );
    }
);

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