3D맵 구현하기 - 유리재질 벽 구현하기

3D맵으로 미로를 만들기 위해 우선 빛이 반사되는 유리재질 벽을 구현하는 방법에 대해 알아보겠습니다.

 

(1) test.js

 

const glass_material = new THREE.MeshPhysicalMaterial({
      color : 0xffffff,
      metalness : .1,
      roughness : 0.05,
      ior : 2.5,
      thickness : 0.2,
      transmission : 1,
      transparent: true,
      opacity: .5,
      reflectivity: 0.2,
      refractionRatio: 0.985,
    });

    let glass_geometry = new THREE.BoxGeometry(75,20,1,256,256,256);

    const glass_1 = new THREE.Mesh(glass_geometry, glass_material);
    glass_1.position.set(-87.5,10,-86.1);
    // glass_1.add(glassCamera);
    this._params.scene.add(glass_1);
    this.glass_1 = glass_1;

    const glass1Shape = new CANNON.Box(new CANNON.Vec3(glass_1.scale.x * 37.2, glass_1.scale.y*10, glass_1.scale.z));
    const glass1Body = new CANNON.Body({
          mass : 0,
          position : new CANNON.Vec3(glass_1.position.x, glass_1.position.y, glass_1.position.z),
          shape : glass1Shape,
          material: concreteMaterial,
        });
        glass1Body.collisionResponse = 0.1;
        glass1Body.addEventListener("collide", () => {
          // console.log("collide");
        })
        world.addBody(glass1Body);

유리재질을 구현하기 위해 THREE.js 의 MeshPhysicalMaterial을 사용했고 속성으로 color 색은 흰색으로, metalness 금속재질은 0.1로, roughness 표면의 거칠기는 0.05로(거칠기가 높으면 반사가 잘 안되서 반사가 잘되는 유리재질 특성상 작은 값을 부여하였습니다), ior 굴절률은 2.5로(ior 1의 경우 진공매질, 1.00029의 경우 공기매질, 1.4~1.7의 경우 유리매질, 2.419의 경우 다이아몬드 매질의 일반적인 굴절률입니다.), thickness 유리의 두께로 0.2로(두께가 두꺼울수록 뒤의 배경이 왜곡되어 보입니다.), transmission 투명도로 1을 부여해서 완벽하게 투명한 상태로 지정합니다. transparent 속성을 true로 주면 opacity, reflectivity, refractionRatio를 지정할 수 있고 해당 3개의 속성은 유리에서 다른 유리로 빛이 반사되어 여러 겹의 유리가 존재할 경우 빛이 모든 유리에 맺히게됩니다. 이후 유리의 크기를 지정하기 위해 THREE.js의 BoxGeometry를 이용하여 75 * 20 * 1의 박스를 생성하고 모든 면은 256개의 면으로 구성한다고 정의했습니다. 이후 Mesh 재질로 앞서 정의했던 geometry와 material을 이용하여 유리재질의 박스를 생성하고 해당 유리의 위치를 position.set을 이용해 위치 x,y,z 좌표를 지정하고 scene에 추가하여 유리가 화면에 보이게됩니다. 이후 cannon.js에서의 world에도 물질을 추가해서 캐릭터와의 충돌을 구현해야하므로 CANNON.js의 Box를 이용하여 벡터변수로 x,y,z의 크기를 지정하여 생성합니다. 이후 유리의 몸체를 생성하는데 이 때 속성으로 mass는 0을 부여해서 충돌이 발생해도 밀리지 않게 만들고 position 속성으로 위치값을 벡터형태로 전달하고, 모양 shape는 앞서 정의했던 Box를 지정하고 material은 캐릭터와의 충돌을 구현하기 위해 concreteMaterial로 정의했습니다. 이후 collisionResponse를 이용해 캐릭터와의 충돌시 어느정도의 반발력을 줄 지를 결정하고(0일 경우 캐릭터가 밀리지 않으므로 통과되고 이를 방지하기 위해 0보다 큰 값으로 부여합니다.) addEventListener를 이용해 collide가 발생했을 때 특정 함수를 실행할 수 있습니다. 이후 world에 해당 body를 추가함으로써 물리세상에도 해당 유리를 구현합니다.

 

이번 게시글에서는 미로를 만들기 위한 단계로 유리재질의 물질을 만들고 이를 물리세상에도 구현해서 캐릭터와의 충돌까지 구현하는 방법에 대해 알아보았습니다.