Three.js 인터랙션

What

WebGL로 만든 3차원을 "멋있는 배경"이 아니라 읽을 수 있는 공간으로 쓰는 방법을 찾는 스터디입니다. 좌표에 의미가 있어야 하고, 움직임이 곧 조작이어야 합니다.

Why

대부분의 웹 3D는 스크롤에 반응하는 장식입니다. 그러면 화면은 무거워지고 얻는 정보는 없습니다. 3차원이 정당하려면 2차원으로는 못 하는 일을 해야 합니다 — 거리가 곧 유사도이고, 이동이 곧 선택인 공간처럼.

Process

관련 작업에서 실제로 시험한 것들입니다.

• Distance of Thinking – Three.js로 언어 모델의 다음 토큰 확률장을 공간으로 세우고, 관람객이 그 안을 비행합니다. 비행 경로가 그대로 모델의 답이 됩니다. 조종은 손잡이(Arduino · MPU6050)가 맡고, 화면은 위치와 속도만 그립니다.
• Synthetic Vision Fund – p5.js로 그린 생성 이미지를 페이지의 배경이 아니라 상품의 얼굴로 씁니다. 같은 질문의 2차원 버전입니다.

Result

• 좌표에 뜻이 있을 때만 3차원이 이깁니다. 확률장에서는 가까움이 곧 "그럴듯함"이라, 사용자가 방향만 알면 설명이 필요 없었습니다.
• 프레임은 조작의 문제였습니다. 입력(센서) 주기와 렌더 주기를 분리하고 나서야 비행이 손에 붙었습니다.
• 배경으로 쓸 거면 빼는 게 낫습니다. 이 사이트에 3D가 하나도 없는 이유입니다.