[Three.js] Three.js THREE.Color: Unknown color 0x3C33FF 문제 해결 방법

Three.js에서 Mesh 객체를 생성하고 해당 Mesh에 color를 동적 변수로 넣으려고 했는데, THREE.Color: Unknown color 0x3C33FF 이 에러가 발생했다. 이 에러를 해결하기 위해서는 따로 THREE.Color 객체를 생성해서 색상을 지정해줘야 한다.

---

문제 해결 방법

기존에는 색상을 지정하기 위해 아래와 같이, "#"에 헥사 컬러 코드를 붙여서 해당 MeshBasicMaterial를 정의했다. 그런데, 아래와 같이 할 경우에 THREE.Color: Unknown color 0x3C33FF 이 에러가 발생했다.

const itemColor = "#" + itemDrawInfoRack.drawInfo.FCOLOR);

// Bin material 생성 (전체 색상)
var binMaterial = new THREE.MeshBasicMaterial({ 
    color: itemColor,
    transparent: true, 
    opacity: 1.0  // 투명도
});

 

 

그래서 공식 문서를 찾아 보니, 색상을 지정할 때는 THREE.Color를 선언하여 색상을 지정해서 그 색상을 넣었다.

위의 방법으로 적용한 코드는 아래와 같이, new THREE.Color로 해당 헥사 컬러 코드를 설정하고, 해당 변수를 MeshBasicMaterial에 정의했다.

 

const itemColor = new THREE.Color("#" + itemDrawInfoRack.drawInfo.FCOLOR);
		        
// Bin material 생성 (전체 색상)
var binMaterial = new THREE.MeshBasicMaterial({ 
    color: itemColor,
    transparent: true, 
    opacity: 1.0  // 투명도
});

 

 

그냥 직관적으로, 해당 컬러를 문자열로 정의하면 되겠지만, 조건에 따라 색상들을 지정해 줘야 한다면 하드코딩을 하는 것보다 위의 방식으로 적용하는게 좋다.