Abantech / abantech.github.io

Abantech public repository
http://abantech.net
1 stars 2 forks source link

Challenge - help build our fully 3D website in ThreeJS #17

Open GMelencio opened 7 years ago

GMelencio commented 7 years ago

Issuing a challenge to any and all with the hacking/coding chops and want to show off what a real website in 3D ought to be and look like.

Bottom line up front: we want to build a fully 3D website that the user navigates around within the 3D space. We want to make it so that the website is a series of "rooms" where each room holds to content to a certain section of the site. The thought is that being on our site is like being in a giant spaceship - or a museum in space (a space museum?) - the point is that the user experiences the content in each "room"*, and there are pathways that connect each room to ALL the other rooms.

Here is a 3D model I made that represents how it might be - the github previewer should show it... https://github.com/Abantech/abantech.github.io/blob/master/SiteModel.stl

The idea is that the cylinders are merely corridors that the users would move through to get from room to room. Each room must be spherical so that the user can look all the way around at the content we post on the walls. Instead of scrolling The user would merely look up around him/her. We can even have a section of the wall that is a "window" to the outside (like one would see on a spacecraft) - from there they could look some 3D models we'd put up for viewing.

Here's a project - built with threejs(!) - of what I envision the user moving from room to room might look like: http://www.hellorun.helloenjoy.com/

Now, the moving from place to place would have to be controlled by us - like they were elevators - otherwise, the users might just get stuck (or worse just lost) - although that's partly why the geometry was designed as I did above - from each of the 5 spheres, you can always get to any of the other 4.

Now, how would it look as the user moves through the corridors? This reminds me of something @theo-armour showed me a long time ago - it's actually one of the threejs examples: https://threejs.org/examples/#webgl_geometry_extrude_splines - try that out with "SampleClosedSpline" and turn all the settings up (you'll be INSIDE the spline) - unfortunately there are no faces on the inside but, we can fix it so that ours has.

So I ask you all - in the name of all that is 3D - who can help us get this puppy started? Should be relatively simple enough. I'd personally like to focus on how the rooms will look but am looking for help with the other areas, - specifically how to control the movement from one place to another, maybe create the scaffolding so that I can just plug in our content and do the cosmetics of the 3D model - leave the boring admin / marketing bs to me to handle, but I know you others would love to hack into this work of art!

theo-armour commented 7 years ago

@GMelencio

Some nice thoughts.

Camera movement is not that difficult. See:

http://jaanga.github.io/moving-manuals/kallax-nxn/kallax-nxn-basic-r8-@.html

https://cynthiaarmour.github.io/oakland-gran-fondo-2016/

There's a masses of examples for going down tunnels. Just one:

https://www.clicktorelease.com/code/cruciform/

There's lots of way to create stuff in rooms:

See http://jaanga.github.io/equirec/equirec-image-flickr/equirec-image-flickr-r4.html

Check 'Add Bubbles'

So none of this is a big deal.

The real questions relate to

Anyway. let's say this is one room:

https://prediqtiv.github.io/eye-cue/replay/eye-cue-replay-r2.html

Anyway a good way to think of things is more a 'web presence' thane a 'web site'. If you want peeps to come back then there needs to be fresh things happening each time they visit.

GMelencio commented 7 years ago

Thanks for the great input @theo-armour!

First off - uh, I think there's a bug with http://jaanga.github.io/equirec/equirec-image-flickr/equirec-image-flickr-r4.html - the rotation does not stop for me... But https://www.clicktorelease.com/code/cruciform/ is a great/sexy example of a nice visualization.

As for your questions:

Who are we trying to please?

Ourselves mostly - and maybe some site visitors. It's less about pleasing but about being true to our core mission. We believe 3D is better than the flatlanders' obslesence. Let's set out to prove it in all aspects of our work.

What thing are we trying to solve?

The same old problem - information cannot and should not be restricted to a 2-dimensional medium.

Do we have an audience?

Yes and no. My thinking here is "build it and they will come". Those that don't only indicate either our failure to market properly or that the purported audience already has a previous engagement, specifically a dinner date with Mr Darwin.

Where are the eyeballs?

What... is the question here??

Can we disrupt something?

Not that we mean to, but Website design surely... think of mind maps which are so prevalent today - this can be an example of turning those into content for mass consumption...

theo-armour commented 7 years ago

@GMelencio

the rotation does not stop for me

Press the space bar.


This reply may get to be a bit off-topic

Having an active 3D web presence is of the essence when it comes to 3D viz. But even more important is that the web presence is connected to the mission/vision of the product that is being promoted.

For example, https://www.clicktorelease.com/ is a wonderful 3D site. You may want to hire Jaume Sanchez, but nobody of going to buy or invest because of what is shown on the web site.

Generally, it's a good idea to build the site after the demos are built not before.

Anyway that's not the main thrust of this message

One of the reasons I joined Abantech is because you said you wanted to be the CEO. I see the CEO as being a person who manages people. A CEO looks after finance, marketing, sales, operations, HR, tech, design and more. These are things a tech like me really needs.

In the past year I have built a bunch of projects

All have interesting, viable aspects; technology that's interesting and works; have eye-catching capabilities. Yet - the poor things - they just sit there hidden under rocks. My tech may be great but it needs marketing and sales and connecting with real-world and real users. I think Chris Wren is kind of in the same position.

I have hoped that you would step up to a CEO role - guiding a team towards doing what its peeps can do well / taking the excellence of what the peeps develop and bring this technology to market / helping tech collaborate and build sums greater than the parts - and so on.

So far I have not seen you working in this way. You like it when when we give you a hand, you like it when we applaud your success. You seem less interested in the work of others - unless they are working on one of your ideas.

A CEO is a decider of what her/his peeps instigate. You seem to want to do the instigating as well. It would be more CEO-like to ask and monitor closely what peeps are working on and then saying 'Hey, would could make money on that idea!'

I could write for a long time about what a CEO does, what I have been/am doing, what opportunities are going missing and more. But it's only really worth doing if there is a CEO in the house. ;-)

theo-armour commented 7 years ago

@Abantech/core

My previous post could be amplified with some further thoughts.

CEO, CFO, CMO and so on may not be the best terms to be flinging around at the current stage of Abantech development.

The C- titles are applicable when there's money in the house ( ie a funded company) and numerous staff are on salary. When it's all a personal cash and home computer effort these terms are jokes or inflated reality.

The terms I tend to hear for early stage collaborations with a few members are 'tech founder', 'business-founder' and 'founder' or 'co-founder'.

These titles should in no way be conflated with sole practitioners, individuals, lone wolves, self employed and whatever. The usage of the word founder tends to imply involvement with an un-renumerated but quite collaborative effort.

There is a significant distinction between 'business founder' and 'tech founder'. The tech founder tacks to money peeps, the tech founder talks to tech peeps. Apart from talking with each other, they usually try to stay out of each other's way.

Currently, I see @GMelencio operating mostly as a 'sole practitioner' with a mission to bootstrap a company so it produces sufficient income to employ workers to help with the coding he would like to see happen and so on. The role of other founders in this mission may be incidental and not instrumental.


You want to go through tunnels with a 360 view?

https://threejs.org/examples/#webgl_video_panorama_equirectangular


References

GMelencio commented 7 years ago

@theo-armour

Sorry it's taken me a while to reply to this. As you may see from my emails I've been extremely busy with preparing for the upcoming events and am very shorthanded with @james-h-stephens being preoccupied...

Currently, I see @GMelencio operating mostly as a 'sole practitioner' with a mission to bootstrap a company so it produces sufficient income to employ workers to help with the coding he would like to see happen and so on. The role of other founders in this mission may be incidental and not instrumental.

Thanks for pointing out where we are with the team. A lot of times it really does feel like I'm alone in trying to build the business - a company is much more than just code. Laltely I'm happy to say that Chad has stepped up to the plate, and Pat has been really helpful.

You want to go through tunnels with a 360 view? https://threejs.org/examples/#webgl_video_panorama_equirectangular

That's pretty cool, is that the LHC? Anyway, I was thinking something much simpler and quicker to render - the thing I showed before: http://hellorun.helloenjoy.com/ captures the essence of it quite well. It doesn't even have to look good. The other problem with doing threejs is that it makes the text difficult to update/author - so to do what we wanted initially the easiest solution would have to be CSS3D - fortunately I found a great example here: https://codepen.io/peterwestendorp/pen/JEomi for the transition, and then as a user enters each "room" it would look sometihng like this: https://www.greenwoodcampbell.com/ but instead of being an image it would be a nicely rendered 3D room we could copy from somewhere, like this: http://www.roadtovr.com/wp-content/uploads/2016/03/oculus-home.jpg

Unfortunately what we're now missing is technical muscle to do that right now...

As far as the planning goes, I'm happy to say that after a good discussion Chad and I agreed that, even if the website isn't built in ThreeJS (something I don't think I have the bandwidth to do unless I have help - from you perhaps?) we might go with a site that is at the very least presentable so that I'm not constantly having to apologize every time I hand out my business cards.

To that effect, here's the most recent message I sent our content writer Pat: There's a link at the bottom to some really cool threejs sites that we like - you may be interested to checking it out:

Pat,

Was good talking to you earlier. As promised here are some samples: Here's a bootstrapJS template that I like because of how the background gets intersparsed with the content in a meaningful way http://demo.templateocean.com/f/#alexis

Here's a wordpressplugin that I think is cool since it showcases 3D (not sure how we'd use it though) https://themeforest.net/item/time-travel-timeline-wordpress-theme/6639517

This has a cool sidebar - don't care much for the 3D but the cleanliness and combination of icons - really make it work https://themeforest.net/item/huge-unique-modern-3d-portfolio-for-creatives/6220118?ref=pro0

This one I like as a concept for being able to showcase our work/demos... http://themes.cray.bg/themeswitch/?theme=Storyline%20Board

Finally, when we were thinking of dooing the 3D website, here's the link to the spreadsheet of sites we checked out. Each with have the comments from all 3 of us. I'm not sure how much of this we can do with wordpress (quickly) but I'm showing this just so you have an idea of the team's preferences: https://docs.google.com/spreadsheets/d/1rQWdXYYKfWiI1mvsEXYywlgmrh50Sk2UEqiPWXC2M98/edit#gid=0

You want to go through tunnels with a 360 view? https://threejs.org/examples/#webgl_video_panorama_equirectangular