React-three-fiber: help wanted for creating a website

[drcmda]

👋anyone wants to help make a good webpage for three-fiber? i am trying to get something going but i have no idea what i'm doing, layout and typography is out of my league completely.

this is what i've got so far from playing around:

live demo here: https://pjcc1.csb.app/ (editor: https://codesandbox.io/s/three-fiber-useloader-pjcc1)

as always, i would be happy to credit you plus link on the site.

as for the requirements ...

it doesn't have to look like the above at all.

it could be really simple or really fancy.

it could have docs or none at all.

it could even be a small interactive tutorial, like this one: https://use-key-state.mihaicernusca.com

basically, if you have ideas, make a proposal! 😊

[ryanking1809]

Hey Paul, I think you've done a good job so far!

I had a quick crack with a similar style using the codesandbox examples
https://kjiqe.csb.app/
https://codesandbox.io/s/laughing-heyrovsky-kjiqe

As we learnt last time, I can be pretty strapped for time, so I'd be keen to see what other people have to offer!

References:
https://threejs.org/examples/#webgl_instancing_suzanne
https://oframe.github.io/ogl/examples/?src=polylines.html

[drcmda]

ah, switching through some examples and the code button, these are good ideas!

[birkir]

If we think in a user-driven approach, the target audience could be

• people coming from THREE.js without any React experience and want to see what all the fuzz is about (automatic cleanup, GC, declarative etc.)
• people that know React, don't know THREE.js and want to start fiddling with 3D
• people using react-three-fiber on daily basis and want a quick access to a reference manual and the examples

the requirements could look like

1. A nice 3d hero, showing the capabilities (the instancing demo is nice @drcmda)
2. An intro into what react-three-fiber is, how it works, and what problems it takes care of behind the scenes. Maybe show a code comparison between vanilla three.js and react-three fiber in a side-by-side view. Tutorial walkthrough like React docs has?
3. Examples with search and tags similar to THREE.js examples + a way to submit your example via pull-request.

---

For look and feel I think you are on to something, just a nice clean UI with lots of spacing. Josefin Sans is a fine font for logo/headings/etc, you would also want a good monospace font for code.

I do think you need a brand color though, THREE.js is using #049ef4, React is using #61dafb and both are a shade of blue. I am not sure going with #33BCF8, which is the midpoint of react and three. Maybe #CC4307, which is the inverted midpoint.

Also find a good code color scheme you would like to associate with, dark or light.

I'll give prototype a try this week!

[drcmda]

these are all great ideas! maybe the hero section could be more or less like it is, users could maybe click through a couple of demos, some code knob like in ryans fork.

scrolling down, a section for threejs users, showing a side by side comparison. going into react benefits, like you said.

next section for react users, showing them how to get started with threejs, links and so on.

last section some general info. github, spectrum, docs, issues, funds etc.

[drcmda]

i've cleaned up some of the examples in the /examples repo: https://react-three-fiber.surge.sh this could be used in the hero section.

[oielbanna]

Coming from a react background here but I've been really wanting to use Threejs more. I'd love to collaborate on this issue once we have a solid sketch.
I thought this was a cool example that we can showcase (with the author's permission of course) side by side because its interactive and super sleek: https://codepen.io/carrot-e/pen/WGkJBZ
I also worked on a VR low-poly type of floating world before that we can cleanup, write in RTF and use as the VR example if its fitting

[partynikko]

I'd really want to see a Hello world example on the first page, perhaps after "How" section. Showing both the code and the results.
Maybe similar to what is done here: https://zzz.dog/#hello-world-demo
Perhaps this example? https://codesandbox.io/s/rrppl0y8l4

Would be a fast and easy way to show off how simple and amazing this library is. Could just be a spinning cube of some sorts with lighting.

[codynova]

i've cleaned up some of the examples in the /examples repo: https://react-three-fiber.surge.sh this could be used in the hero section.

Looking good. I'd be happy to get started on some of the "why"/"how" sections based on your sketch. Any ideas for what a mobile version might look like?

[drcmda]

no idea, but im thinking, these sections should be layout heavy, with big, bold geaders and just nicely aligned text and maybe some image or a code comparison

[tommhuth]

i also think an example integrating Cannon would be great. edit: also the spaceship example is killer!

[mindstorm8191]

I'm currently trying multiple paths to get Three.js set up in a node.js environment, and sadly I'm not having any luck. I followed the setup in the examples folder, but that keeps saying that React's createRoot isn't a function. Changing React versions didn't resolve this issue. I also did a raw install ontop of node.js. While I was able to get a Canvas element set up, I couldn't add anything, including lighting; React was complaining that all components must be PascalCased (I still don't know how Three components aren't PascalCased). I tried to google for solutions to these issues, but didn't find much information out there about React-Three-Fiber.

I think a Getting Started guide will be very important for this site. If I can help getting that guide put together, I will be happy to contribute to it.

Edit: I had been using npm to try the examples folder (since Yarn initially gave me failing errors I couldn't solve). After trying Yarn again, I was able to get things to work. Now, if I could just get the raw install setup working...

[regalstreak]

It would also help to get a proper wiki and some started guides that are more than just on the readme here, I could help in writing some.

[mindstorm8191]

It's taken a week for me to figure out how to load & texture a model, but I finally got it. I put a working example together here https://github.com/mindstorm8191/ReactThreeFiberExample If this could be included in some way, I think it will make it easier for new developers to see how to get things working.

The demos are great - they show what React-Three-Fiber is capable of. But we need more examples, to show how to do basic things.

[robksawyer]

Selfishly, I'd like to see it built with next.js. I'm currently running into some issues right now with it using react-three-fiber (not sure what issues exactly, because I'm getting no errors, just no visuals) and maybe you'll find some solutions along the way. Maybe some ideas will pop up for v4, too. 🤷‍♂️

[a7sc11u]

@drcmda I made a quick sketch of a direction, just to see how you feel about it.

I'm sorry if I'm a bit late in this, I wanted to do it a while ago, but also had a baby in October so priorities shifted quite a bit.

One other idea I'd like to explore - if you're interested - is a kind of early 2000s Yugo Nakamura, mono-craft, ultra minimal approach.

Whaddya think?

[drcmda]

looks great! is this live somewhere?

[a7sc11u]

Oh no, it's just a sketch mockup, no code yet.

[a7sc11u]

I'm glad you're keen though, I'll put a bit of time tonight to think about what's past the masthead and come back with a more detailed update real soon.

[DerekPark]

Hey, what platform are you thinking to build the site on? In my mind they're three avenues:
1) Github page (or other git based builder): easiest for github community to quickly edit docs
2) WordPress: easiest to design well, but limits member interaction
3) React.js: hardest and longest to do well, but could seamlessly integrate with this library in very cool ways
(1 & 2) would probably have minimal, but interactive demos on a subdomain as standalone react apps

[drcmda]

i think react would the most sense, it can still be simple - doesn't need much, just a small intro, definitively some 3d things going on, and it leads the user through a small example.

docs are on the github main page, no need for them to be on the site. and if, then it could just be a copy of the markdown.

[pfortes]

I think a setup with Next.js and MDX could be a great combination.

MDX would give the opportunity to include React components with code examples in a live edit environment and all the examples and docs could live in an easy to update and contribute github repository.

And Next would make it easy to bootstrap and gives the posibility for it to be Server Side Rendered or exported as a static site every time there is a change on the github repository so it could be super fast and inexpensive to host.

[Luiginator]

I really like the idea of having an interactive tutorial on the landing page. This is why I tried to make the hello world, which renders a boxGeometry interactive.

I think this example gives the user a great idea how easy it is to create reusable components with this library and the highlighting of the code snippets should make it easier for them to understand.

Here is what I have for now: https://react-three-fiber-website-playground.now.sh/

[drcmda]

hey that's really nice! wouldn't even need much more, just a small section explaining the benefits, then that interactive tutorial, and maybe some guidance on how to proceed.

[drcmda]

btw the color coded sourcecode component, did you make that yourself?

[Luiginator]

Hey, thank you for your feedback. I am happy that you like it.
Yes I implemented that color highlighting by myself on top of Prismjs which does the syntax highlighting. For this interaction with the code I was inspired by this blog post

I added a section that explains the benefits and one with some guidance. It's not responsive yet but lets see first if you like it 😄

See deployment here

[Dalejan]

@Luiginator Men thats awesome!I This way to show the information... I would have really loved this page a few months ago when i started learning about threejs on react. Actually i DO love it. Nice work!

[supromikali]

@drcmda @Luiginator The idea with a code highlighter and interactive explanaition looks amazing! Why don't you create a repo for the website so that everybody could contribute and share ideas there?

[drcmda]

sure, i would love to dig in, @Luiginator could you put the repo up somewhere? i'd move it to the react-spring org and make you the maintainer, then we can get pr's and contribute.

[Luiginator]

@drcmda @supromikali Sure I can do that. Currently I have it as a replacement of the examples folder in this repo. I thought that this way we could share code between the examples and the landing page and easily publish all the examples.

I am a bit busy this week but I will make sure to clean up the code and publish it beginning of next week. Do you have any preferences on what to use? As lots of people in this issue requested Next.js I am using that + styled-components + TypeScript.

[Luiginator]

@drcmda I published the repo here: https://github.com/Luiginator/react-three-fiber-website

[judicaelandria]

Hi everyone,
still need a help for the website ?

[maurocolella]

Let me know if you need any help.

[SaraVieira]

@drcmda Still need help with this?

[drcmda]

hi @SaraVieira yes, fo sure! :-)

[SaraVieira]

Want me to continue from the one at the top or from your sketch?

I think it would be nice to add some guides

I was learning threejs and ran into some issues when transferring that knowledge

[alekangelov]

@drcmda I'm gonna take a crack at a design. I'm also adding support for the CubeTextureLoader in the useLoader thing :)

[drcmda]

sure that sounds great! these sketches, it doesnt have to - something nice looking and clean would be awesome 🙂

[alekangelov]

@drcmda I got a rough draft going 😳

https://www.figma.com/proto/CDvQElhm1WSnV4J0ZrQ06m/Untitled?node-id=2%3A2&viewport=584%2C237%2C0.3490522503852844&scaling=min-zoom

[SaraVieira]

This looks amazing! Maybe the red react logo may be too much but other than that 10/10

[SaraVieira]

Also it would maybe be a good idea to make the why website an how section where people could start a small project, just a cube and select stuff

Kinda like this
https://github.com/react-spring/react-three-fiber/issues/206#issuecomment-612464190

What do you think @drcmda

[alekangelov]

@SaraVieira bro thank you 😭 my first public outing with a design 😭

but yeah I dig the idea but the execution is really bad. Way too contrived and overly complicated. I'll figure out a solution for the whole thing so it's easier to manage and a random stumbler doesn't get thrown off by the "explanation/interactive demo" when he sees it haha

Also that whole background could be ONE GIANT THREE SCENE where when the user scrolls it takes you to each section background. I did something similar with www.digitalpresent.io

[SaraVieira]

@alekangelov I am doing something based of both yours and @drcmda design here: https://codesandbox.io/s/r3f-website-d8sxf

[SaraVieira]

Moved to here https://github.com/SaraVieira/r3f-wannabewebsite to use Gatsby and make some docs

Sandbox: https://codesandbox.io/s/github/SaraVieira/r3f-wannabewebsite?file=/src/pages/index.js

[SaraVieira]

Here is the first version deployed: https://5ee67ca34c03cd00086584be--gracious-keller-98ef35.netlify.app/

In the docs it still has the MDX from the theme. @drcmda watchu think?

[drcmda]

sorry for the delay, @Luiginator @alekangelov @SaraVieira i created a new team and we have a repo now

sara, the theme here looks awesome to me https://gracious-keller-98ef35.netlify.app/docs/

[alekangelov]

@drcmda,@SaraVieira aw ur actually still using the logo i drew up in 12 seconds 😭 I can make a real one if you guys want instead of a nicely placed font

[drcmda]

make it a pr, we can review 👍🙂

[Fasani]

@drcmda feel free to add me to that team also.

[SaraVieira]

@alekangelov yes, pls make a PR and feel free to keep adding to the homepage

I'm adding the docs for now :)

[SaraVieira]

Here is the repo btw
https://github.com/react-spring/r3f-website

[konnerb]

Hey everyone,

I've actually created a quick prototype for a R3F website as well!

It's inspired by the 'Moksha' and 'Game' demos, as well as many of the ideas from this page, and is built using react-spring libraries.

Here's the link: R3F

I'd be more than willing to help out with the building of R3F's new website. Just name the task, and I'll see what I can do 🙌 🙌

P.S. Only the header links work as of now on the homepage. Still working on making the HTML elements accessible within the canvas..

[gsimone]

Scrolljacking is a bit too much for this kind of website, imo :(