Overview
While I was reading the Aug 2015 issue of the MSDN magazine, I’ve noticed that they wrote an article about the three.js JavaScript 3D library which is been out there for the past 3 years.
ThreeJS Overview [1]
Three.js allows the creation of GPU-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins. This is possible thanks to the advent of WebGL.
High-level libraries such as Three.js or GLGE, SceneJS, PhiloGL or a number of other libraries make it possible to author complex 3D computer animations that display in the browser without the effort required for a traditional standalone application or a plugin.
So I wanted to share a sample project I worked on, which is about creating a billboard with the ability to check the neon lights of it in day and in night conditions.
Demo Overview
Its about a text geometry that is place on a wall, with the ability to set the properties of text such as font, color, weight, etc. But the main target of the demo is to switch between day and night. At night environment you can select, change color or turn on/off the back light and the front light (which is the same as text color), also its possible to add a border to the text with different color.
This sample is useful for selecting a shops billboard.
Live Demo
You can check the demo in a new tab from here.
<iframe style="overflow: hidden;" src="http://gbsamplesthreedtext.azurewebsites.net/index-borderglow.html" width="100%" height="550px" frameborder="0"></iframe>
Outcomes
A night view configuration for the billboard neon lights.
Technical Overview
For the JS code please check the page source of the sample page.
As for the JS libraries used;
In a further blog post a specific technical details about each component of the project. Also note that the code is not written in the highest standards, nor finalized. It is just a quick POC :).
The post Three.JS Neon Lights appeared first on Ghaleb's Blog.
Submit an article or tip
