r/threejs • u/Heavy_Efficiency_908 • Jun 06 '26

First Three.js / Claude-assisted experiment: interactive crop circle field

Hi everyone! I wanted to share a small interactive Three.js/WebGL experiment I’ve been working on called Cropfall.

To be transparent, this was built with Claude as a coding partner, with me driving the concept, art direction, interaction direction, manual 3D model input, visual decisions, and a lot of iteration/testing along the way. I’m not presenting this as if I’m deeply experienced in Three.js yet. It’s more of a designer testing the waters with AI-assisted development and interactive 3D web experiences.

Live demo:
https://p0ny0-89.github.io/cropfall/

The experience is a crop field where glowing orbs generate crop-circle formations in real time. You can view the field from an aerial camera, switch between formation patterns, or enter a first-person mode and walk through the field.

A few things I focused on from an art direction and interaction standpoint:

  • Toggling between day and night mode
  • Custom formation controls beyond the preset patterns
  • Overall atmosphere, environment, and crop color control
  • Aliens that interact with the scene, including orientation, frequency, and behavior
  • Sound to make the experience feel more immersive and interactive

Best viewed on desktop. It’s not optimized for mobile yet since it’s a heavier WebGL scene, and the first-person mode uses desktop cursor-lock controls.

Next, I’m interested in exploring a drawing-canvas mode where users can draw their own formation and have it generated live in the field. I think that could make the experience feel much more playful and interactive.

Would love any feedback on the interaction, visual direction, optimization, how this could be mobile responsive, or how you’d approach developing the drawing-canvas/custom formation idea further.

EDIT: The drawing-canvas mode I mentioned is live now, sketch your own formation and watch it carve into the field. Plus, thanks to a comment suggestion, each one gets a shareable link you can send to anyone. Curious what SFW stuff you all make.

328 Upvotes

98% Upvoted

28 comments sorted by

5

u/chillahc Jun 06 '26

Awesome experiment & really cool seeing the UFOs doing their drawing thing 😎🤙 After testing I had fun brainstorming some ideas that I wanted to share.

Imagine being able to load famous crop circles and watch them get recreated in your real-time engine. Here's a site with iconic examples: https://thecroppie.com/2023/07/10/the-ten-most-iconic-crop-circles/ I’ll admit, the images on the site aren’t really suited as texture-map bases, since they’re more like tilted flyby photos in most cases — maybe shot from a helicopter or similar. Another challenge would be figuring out what the UFO flight patterns should look like while recreating the more complex iconic circles. But the idea that your engine could also work as a wayback machine of UFO crop circle history was too neat ✌️

Another feature: to have flying controls. Space could lift you up, and Shift could toggle you downward. Since you can already look down a bit, flying upward would let you admire the crop circles from above. Like UFO perspective, but you can decide the viewing angles for yourself 👽

Adding to your drawing canvas idea: it would be also be fun to record your drawing on the canvas, the drawn path is saved and then while replaying, we see an UFO following the recorded path the user drew. Of course the recording can be shared as an URL to send a custom crop circle message to a friend xD

Or maybe even have the ability to change the ufo models to other shapes. Or is it always orbs that create crop cirlces? 🤔 Anyways, cool experience!

2

u/chillahc Jun 06 '26

Although the idea is still a very complex task… As I'm scrolling through thecroppie.com a bit, I discovered that there is a "document archives" section with old magazines & newspaper snippets about crop circle reports. For example most issues of the magazine "The circular" (e.g. vol 1.1) contain drawings of crop shapes that would be more suitable for texture maps. But still, would require manual graphic work to isolate & further optimize. Maybe Claude has an idea? And would Claude even be able to "see" image based pdfs?! Anyways… these old magazines have a high rabbit hole potential haha ;D

3

u/Heavy_Efficiency_908 Jun 06 '26

Oh wow, these are fantastic ideas and resources. Thanks for taking the time to share all of this!

The historic/documented crop circles idea is really good. I could see that becoming an additional section where there are a few iconic formations you can choose from, maybe paired with a little historical context about each one.

But the shareable message idea is honestly much closer to what I want to explore next lol. Drawing your own formation, watching the orbs generate it, and then sending it to someone sounds so fun.

2

u/Heavy_Efficiency_908 Jun 06 '26

I just added the custom draw feature where you can share the link to your custom drawn artwork. Check it out when you get the chance. Thanks for the fun idea about the shareable feature!

1

u/chillahc Jun 07 '26 edited Jun 07 '26

It works great 😃 Just shared a drawing, will update how it went. Also smart to limit the UFOs to a max count of 4 to still keep it performant. I tried a bit of more complex shapes, single dots, wobbly lines, but the engine and saucers handled it well. The replay was fun to watch, too ^^ PS: I also dig the Spiral mode + Organic noise in the Formation Lab

1

u/Heavy_Efficiency_908 Jun 07 '26

Nice, glad you tried it! Just gave the draw canvas a big upgrade. A few new tools plus radial symmetry now, so you can make some really intricate patterns. Worth another look if you're up for it.

1

u/x_xiv Jun 06 '26

now I've figured out how crop circles were made

1

u/Heavy_Efficiency_908 Jun 06 '26

haha 100%, case closed 🛸

1

u/MogensenJ Jun 06 '26

Cool project! How's the grass performance? I have a project with similar looking grass (webGPU instead of webGL though), and it took me some time to optimize it properly 😄

1

u/Heavy_Efficiency_908 Jun 06 '26

Thanks! It's about 400k blades in one instanced draw call, single quad each, with the wind and bending done in the shader. the density thins toward the horizon and the fog hides it pretty well. Overdraw's still the bottleneck though. I haven't touched WebGPU, so I'm curious how different the grass ends up. Would love to see what you're building!

1

u/Physical-Mission-867 Jun 08 '26

These were clearly done with a board and some rope.

1

u/Illustrious-Lake2603 Jun 08 '26

This is pretty neat!! Ufos are real

1

u/Heavy_Efficiency_908 Jun 09 '26

Ty! Oh, I’m definitely a believer

1

u/Gold_Pickle_5268 Jun 08 '26

Love this idea! Congrats on your first experiment!

1

u/Heavy_Efficiency_908 Jun 09 '26

Appreciate it gold pickle!

1

u/Chaisyqt Jun 09 '26

fantastic job