three.js의 TSL을 이용한 attribute 관련 코드

attribute를 위한 데이터인 Buffer Attribte를 생성하는 방식은 기존과 동일합니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
geometry.setAttribute('random', randomBuffer)
const random = attribute('random')
// <-

material.colorNode = random

위의 코드는 다음 코드처럼 좀더 짧고 효과적으로 변경될 수 있습니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
const random = bufferAttribute(randomBuffer, 'float')
// <-

material.colorNode = random