Chapter 2 section 16 Haunted House 정리

• Group
• 주변에 배치하는 법
• Fog
• renderer setClearColor
• texture 크기 늘리는 법
• sin,cos

Group

• 3D mesh들을 하나의 group으로 컨트롤 가능
• Group객체 선언 후, add해주기

const house = new THREE.Group()
scene.add(house)

...
house.add(walls)
...
house.add(roof)

주변에 배치하는 법

• -10 ~ 10 사이의 x,z 값에 랜덤으로 배치하는 법
• Math.random()은 0~1 사의 값
• Math.PI* 2를 곱해주면 0 ~ Math.PI의 값
• Math.cos, Math.sin은 -1 ~ 1사이의 값
• radius에다가 cos,sin을 해주면 주변에 배치가 가능하다.

 	const angle = Math.random() * Math.PI * 2 // Random angle
    const radius = 3 + Math.random() * 6      // Random radius
    const x = Math.cos(angle) * radius        // Get the x position using cosinus
    const z = Math.sin(angle) * radius        // Get the z position using sinus

    // Create the mesh
    const grave = new THREE.Mesh(graveGeometry, graveMaterial)

    // Position
    grave.position.set(x, 0.3, z)                              

Fog

• THREE.Fog 생성 후에
• scene.fog에 적용해준다.
• fog 객체의 첫번째 parameter는 color
• 두번째 parameter는 near
• 세번째 parameter는 far

const fog = new THREE.Fog('#262837', 1, 15)
scene.fog = fog

renderer setClearColor

• renderer의 clearcolor를 fog 색상과 동일하게 설정하면 black background를 수정할 수 있다.
• fog를 사용하면 같이 사용하자

renderer.setClearColor('#262837')

texture 크기 늘리는 법

grassColorTexture.repeat.set(8, 8)
grassAmbientOcclusionTexture.repeat.set(8, 8)
grassNormalTexture.repeat.set(8, 8)
grassRoughnessTexture.repeat.set(8, 8)

grassColorTexture.wrapS = THREE.RepeatWrapping
grassAmbientOcclusionTexture.wrapS = THREE.RepeatWrapping
grassNormalTexture.wrapS = THREE.RepeatWrapping
grassRoughnessTexture.wrapS = THREE.RepeatWrapping

grassColorTexture.wrapT = THREE.RepeatWrapping
grassAmbientOcclusionTexture.wrapT = THREE.RepeatWrapping
grassNormalTexture.wrapT = THREE.RepeatWrapping
grassRoughnessTexture.wrapT = THREE.RepeatWrapping

• 텍스쳐에 비해서 적용해야하는 geometry가 너무 크면 부자연스럽다.
• 이를 위해서 reapeat을 해주면 자연스러워진다.
• 만약 더 텍스쳐를 작게 만들고 싶으면 texture.repeat.set(2,2)
• 만약 더 텍스쳐를 크게 만들고 싶으면 texture.repeat.set(0.5,0.5)
• 그 후, wrapS,wrapT를 설정해서 repeat되도록 해준다.