正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code... show more

Meng To

177,851 subscribers

79,416 次观看 • 20 小时前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

Meng To

457,649 次观看 • 10 天前

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.

I open-sourced my 3d towers building site and the skills I used to create well-textured three.js models. The entire site is 1.38mb gzipped, including all models, sounds and textures. Site: Github repo: Skills: - threejs-towers - threejs-weather - threejs-landscape With an open-source project you get a way better starting point. All you need is to ask what to change, how to improve it, and rebuild it for a different theme. I added Cambodia, Vietnam and Turkey, plus storms and blizzards, and those came out perfectly with one prompt. The foundation is done, so adapting it and pairing it with your taste is what takes it further. Try modern towers, different backgrounds, weather and styles. SimCity, Civilization, Warcraft, C&C, etc. It's really fun.

Meng To

51,214 次观看 • 7 天前

I ran Opus 5 for two hours to recreate Sakura Crossing as an explorable Three.js version of San Francisco. I had Codex use the Claude Code CLI, so the two agents worked on the same build. The whole site is packaged as a single HTML file. Three.js site: Original repo:

I ran Opus 5 for two hours to recreate Sakura Crossing as an explorable Three.js version of San Francisco. I had Codex use the Claude Code CLI, so the two agents worked on the same build. The whole site is packaged as a single HTML file. Three.js site: Original repo:

Meng To

24,603 次观看 • 18 天前

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

Meng To

68,404 次观看 • 15 天前

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.

I’m blown away by the quality of the landing pages that Opus 5 can create in Three.js. Prompting it with "orbit using mouse" is enough to create a 3D parallax effect. The same goes for "add particles to pointer." It’s like creating a living, breathing world. More prompts I used: - Add a butterfly that flies to the branch and flies away when I mouse over it. - During the intro, first load a wireframe of the branches, similar to the field-scanning effect in Death Stranding. - Add a scan effect to the card images while they load. Then I asked it to use the shader buttons and nav bar I made in previous projects. As explained in my last video, I started with an inspiration and the prompt, “Recreate this in Three.js in a single HTML file. Self-verify until perfect.” Opus 5 ran for two hours. All the code is less than 1 MB. Inspiration: Let me know if I should open-source this.

Meng To

453,621 次观看 • 1 天前

Fable 5 is insane! We gave it a single reference link: HaoqiWen’s Open Design’s built-in skills helped it inspect the site, understand the visual and technical details, and Fable 5 recreate a polished landing page with rich motion and 3D interactions.

Fable 5 is insane! We gave it a single reference link: HaoqiWen’s Open Design’s built-in skills helped it inspect the site, understand the visual and technical details, and Fable 5 recreate a polished landing page with rich motion and 3D interactions.

Open Design

272,112 次观看 • 1 个月前

Introducing Threejs Awesome Graphics Agent Skills npx threejs-awesome-graphics-agent-skills install --agent codex I collected some of the best looking graphic Three.js open source projects on X and distilled them into an agent skills pack, AAA game graphics right out of the box so anyone can create games that don't look like cheap demos These are just examples included in the agent skills. All projects referenced are noted as source materials. I will continuously update this to include new projects with epic graphics

Introducing Threejs Awesome Graphics Agent Skills npx threejs-awesome-graphics-agent-skills install --agent codex I collected some of the best looking graphic Three.js open source projects on X and distilled them into an agent skills pack, AAA game graphics right out of the box so anyone can create games that don't look like cheap demos These are just examples included in the agent skills. All projects referenced are noted as source materials. I will continuously update this to include new projects with epic graphics

Scott

37,742 次观看 • 1 个月前

I vibecoded this neural network visualization for my students and open sourced it. It shows a simple MLP trained on MNIST handwritten digits at several training steps. The visualization is using Three.js and it comes with training code in PyTorch . Link + repo 👇

I vibecoded this neural network visualization for my students and open sourced it. It shows a simple MLP trained on MNIST handwritten digits at several training steps. The visualization is using Three.js and it comes with training code in PyTorch . Link + repo 👇

David Finsterwalder | eu/acc

487,922 次观看 • 9 个月前

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

45,871 次观看 • 1 个月前

Using his prompt, I asked Claude Opus 5 to recreate Fallout in a single HTML file. It gave me a fully explorable world with unique landmarks, a functional Pip-Boy, characters with dialogue trees, and it’s now working on adding a vault! And the entire file is only 2.3 MB.

Using his prompt, I asked Claude Opus 5 to recreate Fallout in a single HTML file. It gave me a fully explorable world with unique landmarks, a functional Pip-Boy, characters with dialogue trees, and it’s now working on adding a vault! And the entire file is only 2.3 MB.

CHRIS FIRST

98,141 次观看 • 21 天前

I asked Fable to create a Mars city in Three.js, after 6hrs and dozens of subagents in one shot, this is the result (100% procedural), using my Three.js Awesome Graphics Agent Skills Still a lot of details i need to polish but this was beyond my expectation🤯

I asked Fable to create a Mars city in Three.js, after 6hrs and dozens of subagents in one shot, this is the result (100% procedural), using my Three.js Awesome Graphics Agent Skills Still a lot of details i need to polish but this was beyond my expectation🤯

Scott

41,812 次观看 • 8 天前

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

Swifter

13,244 次观看 • 5 个月前

Hermes learned my entire repo in minutes. I’m not exaggerating. I pointed the new /learn skill at my codebase… and watched it turn the repo into a reusable skill. Files. Patterns. Architecture. Commands. Workflows. It didn’t just “read” the repo. It created a playbook for how to work with it again later. This blew my mind. Memory remembers facts. Skills remember how to do the work. That’s the difference.

Hermes learned my entire repo in minutes. I’m not exaggerating. I pointed the new /learn skill at my codebase… and watched it turn the repo into a reusable skill. Files. Patterns. Architecture. Commands. Workflows. It didn’t just “read” the repo. It created a playbook for how to work with it again later. This blew my mind. Memory remembers facts. Skills remember how to do the work. That’s the difference.

Luke The Dev

48,867 次观看 • 1 个月前

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:

Daniel San

20,460 次观看 • 7 个月前

I plugged ChatGPT Luna 5.6 and Claude Opus 5 into Blender through MCP, and one of them is one-shotting entire 3D scenes now. Top is Luna 5.6 in fast mode modeling ship cannons with a firing animation. Watching the scene grow mesh by mesh in real time is a separate kind of dopamine. Bottom is Opus 5 building a full carriage scene with terrain, rocks and lighting. This one is simply built for 3D -- the whole thing from a single prompt with zero retries and zero corrections. The entire bridge is one open-source repo, no Python and no modeling skills required: > The repo is with 16.9k stars under MIT license. > It works with any model -- Claude, GPT, Cursor, any MCP client. > The model sees your scene through a live socket and edits it in real time. A year ago this workflow didn't exist, and now the gap between an idea and a rendered 3D scene is one prompt. Save this one -- you will come back for the repo ↓

I plugged ChatGPT Luna 5.6 and Claude Opus 5 into Blender through MCP, and one of them is one-shotting entire 3D scenes now. Top is Luna 5.6 in fast mode modeling ship cannons with a firing animation. Watching the scene grow mesh by mesh in real time is a separate kind of dopamine. Bottom is Opus 5 building a full carriage scene with terrain, rocks and lighting. This one is simply built for 3D -- the whole thing from a single prompt with zero retries and zero corrections. The entire bridge is one open-source repo, no Python and no modeling skills required: > The repo is with 16.9k stars under MIT license. > It works with any model -- Claude, GPT, Cursor, any MCP client. > The model sees your scene through a live socket and edits it in real time. A year ago this workflow didn't exist, and now the gap between an idea and a rendered 3D scene is one prompt. Save this one -- you will come back for the repo ↓

slash1s

150,102 次观看 • 23 天前

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

16,114 次观看 • 1 年前

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the depth texture to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 次观看 • 1 年前

$I think I accidentally created a completely new game genre. I’ve been working on this nonstop for months, and I’m finally ready to show just a tiny fraction of the gameplay. No traditional 3D models. Everything is generated in Three.js through pure math. This is completely insane guys. The actual main feature is still hidden—and it changes EVERYTHING. #threejs$

I think I accidentally created a completely new game genre. I’ve been working on this nonstop for months, and I’m finally ready to show just a tiny fraction of the gameplay. No traditional 3D models. Everything is generated in Three.js through pure math. This is completely insane guys. The actual main feature is still hidden—and it changes EVERYTHING. #threejs

OmedTheVibeCoder

37,303 次观看 • 24 天前

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

Andrew Chen

22,340 次观看 • 1 年前

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,829 次观看 • 1 年前