Two questions about Three.js (non-pixelating html integration, improved trackball)

[jengo]

Hey guys, I'm rather new to Three.js and barely know anything about javascript, but I have this web project for school (CalArts graphic design) and I chose 3D as my theme, so I found myself delving into this whole world.

So I did a lot of research and got most of it but there's still a couple of things I can't wrap my head around, no matter how many days I've spent on searching and reading about it. The project is due in 2 days so I can't afford to spend any more time on searching - about time I'll ask the pros.

 

So, one thing is, I have a 3D environment of windows with information. The way I'm navigating through the windows now is with TrackballControls. It's great, except for 2 things:

 

1. I want to be able to physically move the camera instead of zooming, that way I don't have a limit to my zoom, and I can always rotate on the camera axis rather than the target axis. Bascially something like the PointerLockControls, but be able to control with mouse and also not be restricted to moving on a floor plane.

 

2. Trackball has a weird issue where the whole screen will slightly tilt on the x axis as you move around and rotate. Eventually the slight tilt builds up until the whole screen is totally tilted on the X Axis with no real way to get it back to normal except refreshing the screen. Users who mess with the navigation for the first time find it pretty annoying (I already got used to it since I've been messing with it for a week now). Am I doing something wrong?

 

----

 

My second question is:

 

The whole point of this website is to navigate through information in a 3D space. That means I need to implement HTML pages on the 3D planes and boxes I have floating around, but when I do that with CSS3DRenderer the DOM elements get pixelated when enlarged. How do I go about keeping the HTML information for pixelating? 

 

 

That's it for now, hopefully someone could help me with all this because I'm pretty much lost

 

THANK YOU!!!!

 

(Bonus question - right now I can compare the rendering quality I get to Blender's "Blender Render". Is there any quick way to make things render more like Blender's Cycles engine? Which basically means a way more realistic lighting calculations and what not. Not at all crucial for my project, was just wondering about this)