このサンプルでは、キーボードの上下右左でカメラ操作を行えますが、同じキーで前後左右のポイントへ移動していくようなUIやパソコンゲームで馴染みのあるWASDでの操作にすることも可能です。
コンテンツやターゲットに合わせて、使いやすい、視点酔いしにくいUIの選定を、プロトタイピングを通じて検討していきます。
webGL／バーチャルツアー型コンテンツ／実現できること
また、webGL空間から呼び出せるウェブページに制限はないので、例えばInstagram Graph APIを用いたハッシュタグ投稿収集ページも呼び出せますし、YouTube動画の埋め込みなどももちろん呼び出せます。従来のコンテンツはそのままに、webGL表現を加えることができます。
🔤 Technical Showcase: WebGL text rendering without the existential crisis.
Troika parses .ttf/.otf/.woff files on the fly, generates SDF glyphs in a web worker, and patches any Three.js material so your text gets lighting, PBR, and shadows for free. Plus a full declarative scene framework underneath.
🔗 https://www.webgpu.com/showcase/troika-three-js-framework-webgl-text-rendering
#threejs #webgl #opensource #creativecoding #uiux
We took part in a 3D WebGL project for Cocuy Saroche.
Particularly proud of the level of quality achieved in the model integration, while allowing users to interact with the movement.
A custom tooltip allows real-time parameter adjustments for materials, lighting, reflections, directly in the browser. Allowing live feedback and testing with the teams involved.
No video. No pre-renders. Just real-time WebGL.
#webgl #threejs #3dmodelling #tequila
Built an interactive 3D experience for Lucia—handmade, dimmable lamps you can explore from every angle 💡
Custom WebGL model lets you rotate, inspect, and discover the sustainable craftsmanship in each piece. Paired with photorealistic renderings to showcase the design in real environments.
When traditional product photography isn't enough, 3D interaction tells the full story.
Link in bio to explore 🔗
#WebGL #ThreeJS #Blender #InteractiveDesign #CreativeCoding #ProductVisualization #3DWeb #SustainableLiving #Ecommerce #DigitalCraft #WebDevelopment #3DAnimation #LampDesign #InteractiveWeb #BlenderRendering #WebDesign #CraftsmanshipMatters #DigitalExperience #ProductShowcase #WeblowNo
이게 단순한 그래픽이 아니라 실제 지구 궤도라고? 🛰️
우주 공간이 얼마나 붐비는지 한눈에 보여주는 'Stuff in Space'를 소개합니다! 단순히 우주 사진을 스크롤해서 보는 게 아니라, 직접 마우스로 지구를 돌려가며 수천 개의 인공위성과 잔해물들을 3D로 추적해 보세요!
📝 알아두면 쓸데있는 개발 비하인드
👨💻 누가 만들었나요? 미국의 개발자 제임스 요더(James Yoder)가 놀랍게도 고등학생 시절이던 2015년에 개인 사이드 프로젝트로 제작했습니다. 이 정교한 시각화 프로젝트 하나로 전 세계 우주 마니아와 개발자들에게 큰 화제를 모았죠.
🛠 어떻게 만들었나요? (Tech Stack)
• WebGL & 자바스크립트: 브라우저 환경에서 수천 개의 객체를 부드럽게 3D 렌더링하기 위해 WebGL API를 활용했습니다.
• satellite.js: 단순히 임의의 점을 찍는 게 아닙니다. 미 국방부(Space-Track)에서 매일 업데이트되는 궤도 데이터(TLE)를 자바스크립트 라이브러리로 계산해 실시간 위치를 시각화합니다. 특히 궤도가 알려지지 않은 비협조 위성이나 작은 우주 쓰레기들의 궤도 역학까지 브라우저 상에서 가볍게 구현해 낸 점이 압권입니다!
🎮 이 사이트의 킬링 포인트
1️⃣ 궤도 시각화: 빛나는 점을 마우스로 클릭하면 해당 위성이나 쓰레기의 이름, 고도, 속도, 궤도 경사각 등 상세한 비행 정보를 바로 확인할 수 있습니다.
2️⃣ 그룹별 탐색: 검색창에 'GPS', 'GLONASS' 또는 특정 로켓 이름을 검색하면, 해당 위성망이 어떻게 일정한 패턴으로 지구를 감싸고 있는지 볼 수 있습니다.
3️⃣ 우주 쓰레기의 현실: 파란색 점(작동 중인 위성)보다 빨간색(로켓 몸체)과 회색(잔해물) 점이 얼마나 지구를 빽빽하게 덮고 있는지 직접 체감할 수 있습니다.
👇 지금 바로 내 머리 위 우주 구경하기
🔗 Link: https://stuffin-space.vader.zone
#웹개발 #인공위성 #우주산업 #우주쓰레기 #개발자 #StuffInSpace #데이터시각화 #인터랙티브웹 #WebGL #Javascript #프론트엔드 #코딩 #CreativeCoding #항공우주 #궤도역학 #3D웹사이트 #인생웹사이트
