I’ve created something new for National Blood Week! 
Thinking about giving blood but unsure what to expect? This interactive 3D guide walks you through the full process from start to finish.
One of the biggest barriers to donating blood is simply not knowing what to expect. We wanted to create something that makes the process feel more familiar and hopefully encourages more people to consider becoming donors.
You can explore it here: https://blood-donation.com/
This is beautifully done. I liked the consistent visual style of roundness of all corners.
From 3D point of view I was somewhat wistful when the info panels were shown and hid the center of the 3D scene. I simply had not enough time to enjoy it. But I understand, the info and the intuitive ease of navigation are more important.
I hope the blood donation would be included in the Three.js home page demos.
A side question: do you plan to make more demos? Like, what happens with the blood next, how it get stored, transported to hospitals and used for operations.
Very impressive! The interactive 3D walkthrough is a great way to help first-time donors understand what to expect and feel more comfortable about donating blood. Great use of technology for a meaningful cause. 
Thank you!
I know what you mean, I spent most of my time modelling the scene so it was painful to have to cover it up with the information, but making that information easy to access was the point like you say.
I’m thinking of making the Storybook publicly available at some stage. You’ll be able to look at the scene a bit closer in there.
We did discuss that. Who knows, maybe in the future!
Thank you!
Very nice execution. 
good vibes.
Thank you! 
Very cool demo! I think the artistic style of the models and the colors does give a calm feeling and help those anxious towards donating blood. Great job.
Beautiful work… Congratulations! 
Nicely done!
The graphics reminds me of the video game “Two Point Hospital”.
Although painful to create, the information was very useful and not overdone.
This kind of video style could be useful in all kinds of environments. For example, you could provide instructions for people (including youngsters) to prepare for something that is somewhat complex and perhaps somewhat intimidating - like an amusement ride. Or to provide an overview of how to conduct your visit to an amusement park or a museum.
That comparison makes sense! my main inspiration was actually Theme Hospital. Those are great ideas!
If you are interested in building this kind of sequential experience then I’d highly recommend looking into xState. Its great for stuff like this.
It allows you to configure a state machine with states that flow into each other and controlled using actions. You can preview it as a graph, so it’s incredibly easy to reason about. It makes the UI and animation code pretty trivial.
This is what part of the machine for the blood website looks like:
And is read and updated in the UI like so:
function WelcomeDialog() {
const { send } = MachineContext.useActorRef();
const shown = MachineContext.useSelector((snapshot) =>
snapshot.matches({ welcome: "dialog" }),
);
function handleNextClick() {
send({ type: "DIALOG_COMPLETE" });
}
›
return (
<AnimatePresence>
{shown && (
<Dialog size="small">
I’ve updated this a little bit:
Question: What are the chances of this being picked for the three.js home page? That would be incredible.
I like this. Thanks for the tip about xState—I was curious about how you handled the various scenes.
Here is a prior query about getting your submission on the home page. (Just a wild guess, but I don’t think that particular submission ever made it to the home page - at least not the the three.js home page.)
If you search “submit project for three.js homepage”, several other queries will pop up that may have more information.
Impressed by your work. Beautifully presented.
Thank you!
Didn’t make it on the homepage, new examples are amazing though 
The site is FWA of the day 