Hey guys and gals
After some time of learning
Three.js, I wanted to give my 3D graphics skills a try at making something cool, so I put together this sci-fi scene, based on a composition from this awesome Youtube Video. I failed to make the voronoi animation going, but I still like the result, considering it is real time
The scene is composed out of 7 objects: the pyramid, human, glowy ring, floor, orange particles and 2 glow sprites for both light sources. With the unreal bloom pass it makes for 21 draw calls.
Noise textures were essentials for the effects. I wrote a custom emission shader for the pyramid, while the floor is a plane with a modified
MeshStandardMaterial with “color-ramped” (blender node) noise values modifying it’s roughness and bump factors. Different effects can be tested by changing color ramps’ min and max points with controls’ “CR1” & “CR2” properties.
I left behind some values for fun and testing
My code is still a little messy, but if anyone’s interested, here it is GitHub - DolphinIQ/Pyramid-Scene: Three.js sci-fi scene, based on the composition from https://youtu.be/-h6JLUctbYs video..
Thanks all for the incredible library and awesome community
All feedback is appreciated
Pretty, I like what you did with the spinning ring on the ground, neat trick.
That’s awesome ! I can’t believe the ground is just a plane
What is the total weight in textures for this scene ?
That blue fluid-like effect on the pyramid in the video was so catchy that I wanted to try to re-create it.
It’s kind of similar, but not quite. But I think the idea of getting noise of noise is correct
And a pyramid is here:
On the pyramid, noise is based on the coordinates of vertices, not uvs.
How did you bring all these objects into single scene?
All the objects in the scene are built in the code, except the soldier model which was imported with
Gotcha! Could you help me what does GUI does there?
Repeat X & Y are the noise
texture.repeat properties, which scale the uvs in the shader.
"Water" Opacity is related to lines 17, 18 of shader chunk code. It affects how transparent the places with little roughness (aka “Water”) should be.
CRs 1&2 min&max are terminology from Blender - Color Ramps. If you watch the video posted, you will see Color Ramp nodes used in the Principled Shader materials (Three.js equivalent is
MeshStandardMaterial) for cool effects. Probably best to check Blender docs/tutorials to see what exactly they do. You can Ctrl+F search
"CR1min" etc for them in the shader codes I linked above to see how I implemented them.
Rest of the GUI are pretty standard things, like visibility, or
UnrealBloomPass options (same as in three.js example).
Amazing work. Just wanted to check the license of your code and the limitations of use as there is no mention of this on Github. Thank you.