Show HN: First person 3D environment using CSS 3D Transforms for rendering • Hacker News Board

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#11

Post by [deleted] » Fri, Mar 06, 2020, 6:26 AM UTC

[deleted]

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#12

Post by mleonhard » Fri, Mar 06, 2020, 6:54 AM UTC

The video on the TV behind the door: https://www.youtube.com/watch?v=ICcFMBzOnYs

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#13

Post by gfxgirl » Fri, Mar 06, 2020, 7:42 AM UTC

_bxg1 wrote: post #9

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

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

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#14

Post by numlock86 » Fri, Mar 06, 2020, 7:51 AM UTC

core-questions wrote: post #8

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

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.

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#15

Post by jmiskovic » Fri, Mar 06, 2020, 8:20 AM UTC

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

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#16

Post by verytrivial » Fri, Mar 06, 2020, 8:24 AM UTC

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 (this seems to be a super-cut which will annoy the writers, bit still)

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#17

Post by clarry » Fri, Mar 06, 2020, 9:12 AM UTC

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

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#18

Post by calcar » Fri, Mar 06, 2020, 9:51 AM UTC

quite heavy

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#19

Post by SuperPaintMan » Fri, Mar 06, 2020, 10:02 AM UTC

indrax wrote: post #6

tetrisgm wrote: post #4

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

It uses wasd to move, if that helps.

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

Re: Show HN: First person 3D environment using CSS 3D Transforms for rendering

#20

Post by ath92 » Fri, Mar 06, 2020, 12:30 PM UTC

verytrivial wrote: post #16

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 (this seems to be a super-cut which will annoy the writers, bit still)

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).