Building an interactive 3D event badge with React Three Fiber - Vercel
In this post, we’ll look at how we made the dropping lanyard for the Vercel Ship 2024 site, diving into the inspiration, tech stack, and code behind the finished product. InspirationWe’ve shared digital tickets for event attendance in the past, but this time, we wanted to take it one step further by creating a tangible experience. When Studio Basement made a video in Blender that depicted a virtua
【Babylon.js】Reactを使って3Dモデルを表示する - Qiita
import { useEffect, useRef } from "react"; import { Engine, Scene } from "@babylonjs/core"; export default ({ antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest }) => { const reactCanvas = useRef(null); // set up basic engine and scene useEffect(() => { const { current: canvas } = reactCanvas; if (!canvas) return; const engine = new Engine( canvas, antialia
Build an interactive WebGL experience with Next.js - Vercel
Bring your creativity to life with the web's 3D graphic rendering API. WebGL is a JavaScript API for rendering 3D graphics within a web browser, giving developers the ability to create unique, delightful graphics, unlike anything a static image is capable of. By leveraging WebGL, we were able to take what would have been a static conference signup and turned it into the immersive Next.js Conf regi
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアになりたてのぼこです。 みなさん、Three.jsは好きですか？（唐突） 僕はWebサイトの中でも特に演出やグラフィック、インタラクションに凝ったものが好きなので、表現の幅を増やすためThree.jsと仲良くなれるよう奮闘しております。 話は少し変わりますが、最近はWebサイト制作でも、Next.js（React）やNuxt.js（Vue）を採用することが増えてきている印象です。 NextやNuxtでサイトを作る場合、従来の制作とは手法も考え方も大きく変わると思いますが、そこにThree.jsを導入する場合もやはり注意するポイントが増えます。 そこで、今回は React Three Fiber というライブラリについてお話ししたいと思います。この後詳しく書いていきますが、ReactコンポーネントのようにThree.jsが書けるライブラリで、驚くほど簡単に
Recreating Real-World Terrain With React, Three.js & WebGL Shaders
Recreating Real-World Terrain With React, Three.js & WebGL Shaders Flight Simulator, Heard Of It? You might know about Microsoft's Flight Simulator release in August last year and like me, if you're interested in flight simulators or photorealistic recreations of real life places, you might have spent a lot of time staring in awe at the amazing detail crammed into the latest iteration of the serie
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recreating Real-World Terrain with React, Three.js and WebGL Shaders | Hacker News