
Show HN: First person 3D environment using CSS 3D Transforms for rendering - ath92
https://affectionate-minsky-072f4c.netlify.com
======
_bxg1
Fun fact, Three.js (the go-to high-level 3D library for JavaScript) actually
has a CSS3DRenderer you can slot in for any arbitrary Three.js project:
[https://threejs.org/examples/#css3d_molecules](https://threejs.org/examples/#css3d_molecules)

~~~
gfxgirl
Not for any arbitrary Three.js project. the css3drenderer is severely limited

------
iKlsR
Related [https://keithclark.co.uk/labs/css-
fps/](https://keithclark.co.uk/labs/css-fps/)

------
jmiskovic
You triggered some strange bug in Firefox. I'm getting many notifications that
this site captured mouse pointer long after I've closed it.

------
core-questions
Nice vaporwave aesthetic in there. Add a fountain with some particles!

~~~
numlock86
Yes, and don't forget a rotating plane with an image on it, preferably showing
off high-tech processing such as alpha-blending and soft specularity. It will
look like the future, but from the past.

~~~
ath92
Great ideas, will see what I can do when I get back from work :)

------
verytrivial
So close! Enticing checkerboard pattern and some unshaded wood texturing then
a hard crash for Firefox Android 68.5.0. Evokes the early 90s which reminds me
that anyone who hasn't seen the "Community" episode with the VR parody must
watch it immediately:
[https://youtu.be/z4FGzE4endQ](https://youtu.be/z4FGzE4endQ) (this seems to be
a super-cut which will annoy the writers, bit still)

~~~
ath92
Interesting that it crashes, this uses nothing but normal html & css for the
actual rendering. I have noticed that on machines with slower graphics
hardware, there are a lot of glitches (I think it has to do with low VRAM, but
not entirely sure).

------
gitgud
Pretty cool, it seems to use the DOM directly instead of a <canvas> element,
amazing it can perform as well as it does with constant css and element
manipulation (notoriously slow)

I like that there's collision detection too!

~~~
_bxg1
Element manipulation is normally slow because of layout computations, but
explicit transforms remove the element from the layout flow (it doesn't affect
nor get affected by the sizing and content of other elements), cutting nearly
all of that cost. Also, in most browsers explicit transforms get computed on
the GPU.

So for this type of case there isn't nearly as much going on between the DOM
and the raw graphics code as you might think

------
mleonhard
The video on the TV behind the door:
[https://www.youtube.com/watch?v=ICcFMBzOnYs](https://www.youtube.com/watch?v=ICcFMBzOnYs)

------
leshokunin
I can’t do anything on mobile. Using safari on iOS.

~~~
indrax
It uses wasd to move, if that helps.

~~~
SuperPaintMan
Worked fine in Firefox Mobile on my BlackBerry Key2. That surprised me!

~~~
ath92
Cool to hear that it works on mobile for you, I'll try to add some controls
for phones without keyboards as well.

~~~
dTal
In my case the issue is not lack of keyboard but lack of mouse; I can
translate around fine, but there's no way to look around.

My setup (Android smartphone with a physical keyboard) is probably very rare,
however.

------
rhacker
I'm a bit confused... is this just for the awesome factor that you can do this
with CSS?

~~~
ath92
yes

------
vlovich123
Very cool although noticing lots of tearing on Chrome w/ an nVidia GPU on
Windows 10.

------
voldacar
very cool.

you should write a quake clone like this

------
calcar
quite heavy

------
clarry
Yay, view keeps drifting up & left when mouse is grabbed. Looks like Mozilla
can't ever seem to get this ancient bug fixed :(

