Google Earth and three.js on Contact page


MVC stuff was getting me bogged-down a bit – felt like I needed to do something different for a bit – and I needed to do a Contact page.

I fancied doing:

  • Google Earth video background from space, flying to my house culminating at StreetView level (Liz was a little concerned about that so I decided to just go to the street)
  • Some contact detail clickable three.js visualisation on top of the video

Sounded simple, but so far taken err … a while.

My constraints:

  • Not touching the WordPress theme (yet) … everything needs to be dynamic (javascript)
  • No plug-ins for the video (in case future changes messes-up my overlay divs

Challenges have included:

  • Couldn’t record Google Earth video at decent frameworks in my main VM (turned off hardware acceleration for stability issues)
  • Capturing a region of video, cropping-out controls
  • Hosting the video for streaming – options changed over the years
  • Deprecation of player_api on YouTube in favour of iframe_api
  • For YouTube iframe_api: having empty-div in DOM ready for async API-ready event
  • Video height issues on Android (with CSS) – working around with JQuery/resize for now

Right now I’m still working on it all and I’m not proud of my messy work. It’s doing a lot of CSS stuff in JavaScript rather than CSS. And sometime I need to look at enqueuing JavaScript scripts properly (WordPress technique) rather than just linking to them haphazardly when I need them.

For video capturing I eventually leveraged Window 10’s built-in XBOX app which worked very well and easily for capturing the entire Google Earth window, efficiently. The Google Earth Pro’s built-in video-capture solution didn’t seem to do what I wanted and I didn’t want to spend a huge amount of time with it looking at making Tours etc.

For cropping I went heavy-handed with Adobe Premiere 6, using a crop-transform. I also used Premiere to take-out the still-moments in my video capture. Didn’t have time to make a new capture to just get rid of one tool-tip-show error though; it had required a few “takes” already. It was a struggle to render output efficiently though … I was planning to use Handbrake for multi-pass transcoding/recompression but skipped that when I settled on just using YouTube.

The last time I had streaming video on a webpage I had options of using DropBox, and, I assumed GoogleDrive. I have paid-for space on both, and thought I could just use HTML5 <video> etc. Things have moved-on however and after fruitless trying to make things work I then discovered through negative-research that the options don’t appear to be viable (maybe I’m mistaken but seemed that way).

I already have my main IIS server set-up for streaming, but the VM it sits in is upstairs, with the network bottle-necked by HomePlug networking-over-mains. The house layout and construction isn’t convenient for running Cat5 downstairs without a fair bit of unwelcome disruption (explored in some depth – incl. seeking professional opinion) and is difficult for line-of-sight WiFi though I do intend to use the Link Aggregation facility on my cheap network switches to include a 5GHz 802.11ac wireless bridge in the future. When I can afford it. Some how. Eventually I’ll have IIS and Apache solutions working downstairs and I also looked at setting-up Apache2 for streaming.

This all took a long time.

Eventually I settled on YouTube but got side-tracked looking at player_api solutions before I realised that was deprecated now in favour if iframe_api. More time.

Because I don’t want to mess about with WordPress child-themes or changing the parent theme if I can help it … I’m trying to avoid ballooning complexity that becomes ever-harder to document and maintain as things inevitably change, I’m dynamically altering my pages’ DOM for the video. This is slightly complicated if I can only work in the Header and Footer for scripting, and if using (DOM mod approach) async script loading for the YouTube iframe API script. It looks for onYouTubeIframeAPIReady() within scope, which in turn wants to manipulate an empty DIV by id for video. I haven’t got a great solution yet, at time of writing. It would be easier if I could run script in the body for appending a child Div at the earliest moment possible during page load … then kicking-off the async YouTube API script loading, and then having a document-ready when the async code returns … but I’m well-rusty on JavaScript and scope and changing context etc. still confuses me … I’d have to spend a lot of time with it to get my head ’round it. I’ll have to look at this more carefully in the future. It might be easier to make a custom plug-in … I assume they’ll be a suitable WordPress hook available for the post-content so that I can look for a shortcode to dynamically replace server-side.

For some reason Internet Explorer 11.5 (I think) on my Compute Stick keeps showing the controls for the embedded YouTube video, which changes its dimensions such that the width gets messed-up when I dynamically resize it. I keep the controls because I don’t know how to turn them off dynamically (seem to be part of player-vars that are injected at construction) and I need the controls on for a decent mobile-experience which doesn’t permit autoplay. It would be nice if I could check during a playing-event that everything’s ok and disable the controls dynamically. This threw me for a bit anyway until I realised it wasn’t an Internet Explorer problem per se, but some issue with that instance on my Compute Stick and so probably not anything to worry about in the wider-sense.

Three.js inspiration

After completing my little Google Earth video I realised it was like POV flying, and maybe I could render something in Three.js to be a simple spaceship or some such thing. I really wanted to try three.js for fun, and to learn … as I imagined it might assist me with communicating better in the future, eventually vanquishing my compulsion to write. Initially I was thinking of having a simple game as a captcha – maybe using device orientation api on a mobile device, in order to reveal contact information but I simply don’t have time to get so side-tracked. Instead … KISS. Keep It Simple Stupid.

First of all, I wanted to try a simple CSS3D transform. I needed to know I could transform a child element over a parent YouTube iframe and use it as a canvas for three.js. And responsively resize it. That’s all I need to know for the future.

Next, I started the first three.js tutorial for creating a scene / spinning cube. (I’m not detailing every step like making the canvas background transparent etc. etc.) I did a search for ready-made spaceships hoping there might be a three.js TARDIS, but couldn’t find one. Did find a CSS3D TARDIS. Simplest thing I could find, to do for now … I’ll see if I can know-out a few .pngs in PhotoShop that’ll do for me. Found: