three.js 예제

동시에 동일한 캔버스 요소에 두 개의 서로 다른 카메라 뷰를 렌더링합니다. (“메시 이동” 예제와 동일한 컨트롤입니다.) 이제 예제의 논리를 이해되었으므로 더 복잡한 조각을 생성하기 위해 장면에 더 많은 조각을 추가하려고 합니다. 이 예제의 연습으로 나만의 대안을 만들려고 합니다. 코드를 깨고 포크하고 공유하는 것을 두려워하지 마십시오! 나는 당신의 버전을보고 싶어요. 카메라를 이동하고 보는 것을 텍스처에 투영합니다. (“메시 이동” 예제와 동일한 컨트롤입니다.) 3. 지오메트리는 정점, 모서리 및 면으로 구성된 토폴로지 데이터 구조를 작성하며 각 에 대한 입사 데이터도 작성합니다. 이 예제에서는 해당 형상에 가장자리 가 레이블이 지정되고 브라우저 콘솔에서 데이터를 수동으로 확인할 수 있습니다. (Lebeled 지오메트리 데모를 기반으로 합니다.) 사용자 웹캠 이미지를 이동 가능한 메시(W/A/S/D/Q/E)의 텍스처로 표시합니다.

웹캠 텍스처, 메시 이동, 반사, 스카이박스 및 뷰포트 – 듀얼 : 예제에서 코드를 통합합니다. 웹캠이 필요하고, 사용자가 실행하려면 권한을 수락해야 하며, WebRTC 호환 브라우저가 필요합니다(http://www.webrtc.org/ 참조). 길게 누르고 드래그하여 장면을 회전합니다. 3.js와 트웬맥스.js로 제작되었습니다. 이 예제에서는 큐브의 X 및 Y 회전에 애니메이션을 애니메이션합니다: WebGL Globe는 암 글로브와 마찬가지로 3D 공간에 떠 있는 지구본에 오버레이된 데이터를 제공하는 시각화 실험입니다. 이 예제는 도시별 인구를 중심으로 하지만 데이터 집합이 다른 버전은 여기에서 볼 수 있습니다. 이 웹 페이지에 사용자 웹캠 이미지를 표시합니다. 웹캠이 필요하고, 사용자가 실행하려면 권한을 수락해야 하며, WebRTC 호환 브라우저가 필요합니다(http://www.webrtc.org/ 참조). (3.js 코드가 필요하지 않습니다.이 예제는 다음 예제에 대한 리드 인입니다.) 나는 단지 빨리 Three.js에 대한 빠른 gotcha를 지적하고 싶었는데, 이는 예를 들어 메시의 정점을 수정하면 렌더 루프에서 아무것도 변경되지 않는다는 것을 알 수 있다는 것입니다. 왜? Three.js (내가 말할 수있는 한)는 메시의 데이터를 최적화의 일환으로 캐시하기 때문입니다. 실제로 해야 할 일은 필요한 것을 다시 계산할 수 있도록 무언가가 변경되었음을 Three.js에 플래그를 표시하는 것입니다. 다음을 사용하여 이 작업을 수행합니다.

마우스가리키면 메시 이름을 표시하는 도구 팁 스타일 효과를 만듭니다. (예제에서 아이디어를 사용: 마우스 스프라이트, 마우스 호버링 및 캔버스에서 텍스처.) 게임 패드(예: XBox 컨트롤러)를 사용하여 캔버스 주위로 정사각형 이미지를 이동합니다. 실행하려면 Chrome 브라우저와 연결된 게임 패드가 필요합니다. http://github.com/inequation/gamepad.js gamepad.js 라이브러리(패치)를 사용합니다.