基於 yting23 看不下去只有剛體的夾娃娃機台外型，熱心的用 blender 繪製了夾娃娃機的模型，今天就來匯入朋友的善意

程式碼

匯入夾娃娃機底座

function base_loader(){
    // 載入 loader
    const loader = new THREE.GLTFLoader()
    // Load a glTF resource
    loader.load(
        'gltf/claw_machine/base.gltf',

    // called when the resource is loaded
    function ( gltf ) {
        base = gltf
        baseObj = gltf.scene
        baseObj.position.x = -2;

        baseObj.scale.set(1, 1, 1);

        // 設定陰影
        baseObj.traverse(function(object) {
            if (object instanceof THREE.Mesh) {
              object.castShadow = true
              object.receiveShadow = true
            }
          })
        scene.add(baseObj);
    },
    // called while loading is progressing
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    // called when loading has errors
    function ( error ) {
        console.log( 'An error happened:'+error );
    }
)}

匯入夾娃娃機上半部玻璃，要特別注意的是，在 blender 中有設定透明度的話，Three.js 在匯入時需要設定object.material.transparent = true，否則不會有透明度效果

function glass_outer_loader(){
  // 載入 loader
  const loader = new THREE.GLTFLoader()
  // Load a glTF resource
  loader.load(
      'gltf/claw_machine/glass.gltf',
// called when the resource is loaded
  function ( gltf ) {
      glass_outer = gltf
      glass_outerObj = gltf.scene
      glass_outerObj.position.x = -2;
      glass_outerObj.position.y = 4.5;

      glass_outerObj.scale.set(1, 1, 1);

      // 設定陰影
      glass_outerObj.traverse(function(object) {
          if (object instanceof THREE.Mesh) {
            object.castShadow = true
            object.receiveShadow = true
          }
          // 設定 gltf 透明度
          if(object.isMesh ===true){
            object.material.transparent = true
            object.material.opacity = 2
          }
        })

      scene.add(glass_outerObj);
      console.log(gltf)
},
// called while loading is progressing
function ( xhr ) {
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
  console.log( 'An error happened:'+error );
}
)}

匯入屋頂

function roof_loader(){
    // 載入 loader
    const loader = new THREE.GLTFLoader()
    // Load a glTF resource
    loader.load(
        'gltf/claw_machine/roof.gltf',
  // called when the resource is loaded
    function ( gltf ) {
        roof = gltf
        roofObj = gltf.scene
        roofObj.position.x = -2.3;
        roofObj.position.y = 9.8;
        roofObj.position.z = 1;
  
        roofObj.scale.set(1, 1, 1);
  
        // 設定陰影
        roofObj.traverse(function(object) {
            if (object instanceof THREE.Mesh) {
              object.castShadow = true
              object.receiveShadow = true
            }
          })
  
        scene.add(roofObj);
        console.log(gltf)
  },
  // called while loading is progressing
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },
  // called when loading has errors
  function ( error ) {
    console.log( 'An error happened:'+error );
  }
)}

成果

Day24 Demo | Github

Reference

https://discourse.threejs.org/t/changing-the-transparency-mode-of-my-glb-file/20199/2