<meshBasicMaterial color={0xffff00} wireframe={true} />

wireframe 속성을 true로 주는걸로 와이어형태

기본 속성

<meshBasicMaterial
                    visible={true}
                    transparent={false}
                    opacity={1}
                    depthTest={true}
                    depthWrite={true}
                    side={THREE.FrontSide}
                />

이 속성들이 모든 Material의 부모 클래스인 Material 클래스의 속성이다.

위의 값들을 디폴트로 가짐

opacity 속성은 transparent 속성을 true로 주어야만 동작

DepthBuffer(Z-buffer)는 거리감을 나타내는 척도이다. 가까우면 Z-buffer값이 작고, 멀면 크다. 아래 사진에서 작은 값은 어둡게, 큰값은 밝게 보이는 것을 알 수 있다. CSS의 z-index와도 비슷한 개념으로, 화면상에서 동일한 픽셀에 그려지는 두 객체의 Z-buffer값을 비교해 가려짐을 구현한다.

depthTest 속성은 렌더링 시 Z-buffer값을 이용할 것인지에 대한 여부를, depthWrite 속성은 렌더링 되는 메쉬의 픽셀에 대한 Z값을 버퍼에 기록할 것인지에 대한 여부를 나타낸다.

side는 어떤 면들을 렌더링할 것인지 나타내는 속성이다.

THREE.FrontSide - 디폴트, 앞면만 렌더링

THREE.BackSide - 뒷면만 렌더링

THREE.DoubleSide - 양면 렌더링

meshLambertMaterial

meshBasicMaterial은 광원의 영향을 받지 않지만, meshLambertMaterial은 메쉬를 구성하는 정점에서 광원의 영향을 계산한다.

color - 재질의 색상