house.objを読み込んでオブジェクト毎にマテリアルを設定

2023年3月23日 18:23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Load OBJ file</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r132/examples/js/loaders/OBJLoader.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r132/examples/js/controls/OrbitControls.js"></script>
    <script>
      let scene, camera, renderer, controls;
      let obj;
      
      init();
      animate();
      
      function init() {
        // シーンを作成します
        scene = new THREE.Scene();
        
        // カメラを作成します
        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        camera.position.y =  3;
        camera.position.z =  4;
        camera.lookAt(new THREE.Vector3(0, 1, 0));
        
        // Add a point light to the scene
        const sunLight = new THREE.PointLight(0xffffff, 1, 100, 1);
        sunLight.position.set(10, 10, 10);
        scene.add(sunLight);
        
        // Add an ambient light to the scene
        const ambientLight = new THREE.AmbientLight(0xeeeeff, 0.7);
        scene.add(ambientLight);
        
        // 平行光源を作成します
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0, 3, 1);
        scene.add(directionalLight);
        
        // レンダラーを作成します
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xffffff);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // OrbitControlsを作成します
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        

        // OBJファイルを読み込み、シーンに追加します
        const house = createHouse(0, 0);
        scene.add(house);
        
      }
      
      function createHouse(x, y) {
        // OBJファイルを読み込み、シーンに追加します
        const house = new THREE.Group();
        const loader = new THREE.OBJLoader();
        loader.load('house_002_3.obj', function(object) {
          obj = object;
          
          // マテリアルを作成します
          const material1 = new THREE.MeshPhongMaterial({
            color: new THREE.Color(0.5, 0.5, 0.5),
            specular: new THREE.Color(0.1, 0.1, 0.1),
            shininess: 0,
          });
          
          const material2 = new THREE.MeshPhongMaterial({
            color: new THREE.Color(0.8, 0.2, 0.2),
            specular: new THREE.Color(0.8, 0.1, 0.1),
            shininess: 0,
          });
          
          const material3 = new THREE.MeshPhongMaterial({
            color: new THREE.Color(0.8, 0.8, 0.8),
            specular: new THREE.Color(0.5, 0.5, 0.5),
            shininess: 0,
          });
          
          // オブジェクトの子要素にマテリアルを適用します
          obj.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
              // ここでオブジェクトの名前に基づいてマテリアルを割り当てます
              if (child.name.includes('wall')) {
                child.material = material1;
              } else if (child.name.includes('roof')) {
                child.material = material2;
              } else if (child.name.includes('door')) {
                child.material = material3;
              }
            }
          });
          
          house.add(obj);
          house.position.set(x, 0, y);
        });
        
        return house;
      }

      function animate() {
        requestAnimationFrame(animate);
        
        // OrbitControlsを更新します
        controls.update();
        // オブジェクトを回転させます
        if (obj) {
          obj.rotation.y += 0.01;
        }
        camera.lookAt(new THREE.Vector3(0, 1, 0));
        
        // レンダリングします
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
この記事が気に入ったらサポートをしてみませんか？