Three JS for absolute beginners

Why do we need 3D and Geometric shapes in our design?
Design in 2017 will continue the trends that materialized in 2016 while adding some new influences, but the feeling is well known and familiar and you may have seen it in the past couple of years.

3D is definitely heading our way and we are going to see its influence in all design fields. With the VR/AR revolution rapidly building momentum, this domain is evolving pretty fast.

Also Geometric Shapes, Patterns, Lines and Circles. This trend started in 2016 and will definitely continue in 2017. You can personalize a website simply by adding some modern shapes, either flat or with a soft shadow.


How to create and display animated 3D computer graphics in a web browser?

Use three.js

three.js??
Three.js is easy to use, lightweight, JavaScript 3D library. The library provides CSS3D and WebGL renderers.

WEBGL doesn’t ring a bell?
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 elements.

Okay does it support all browsers?
Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL. The following method allows you to check if it is supported and use CanvasRenderer if it is not.
Add Detector.js to your javascript and run the following before attempting to render anything.
renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

How to get started?
Basic Procedure

  • Creating the scene
  • Rendering the scene
  • Animating the object


Where is the HTML part?

That’s all. All the code below goes into the empty <script> tag.

Creating the scene
To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.


Here we use PerspectiveCamera. Camera that uses perspective projection. This projection mode is designed to mimic the way the human eye sees. It is the most common projection mode used for rendering a 3D scene.

  • The first attribute is the field of view.
  • The second one is the aspect ratio.
  • The next two attributes are the near and far clipping plane.

Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don’t have WebGL support for some reason.

In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.

Geometry and Material
To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube. In addition to the geometry, we need a material to color it. All materials take an object of properties which will be applied to them.

Mesh
A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.

var cube = new THREE.Mesh( geometry, material );

By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.

scene.add( cube );
camera.position.z = 5;

Rendering the scene

Render loop will create a loop that causes the renderer to draw the scene 60 times per second. requestAnimationFrame has a number of advantages.
Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.

This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the render loop.

Congratulations! You have now completed your first three.js application. It’s simple.

For complete code and result check JS Fiddle Link

Advertisements

Meteor 1.4 with React for Beginners

meteorreact

What is Meteor Js

MeteorJS, is a free and open-source JavaScript web framework, written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

Latest Stable Version :Meteor 1.4

What is React Js

React is a JavaScript library built by a group of engineers at Facebook and Instagram. It describes itself as a “JavaScript library for building user interfaces”. Whereas other JavaScript libraries like Angular and Ember contain features related to data fetching, data modeling, controllers, etc – React is only concerned with the “view” of your application.

The full code lives in this repo.

Starting the basic folder structure

The folder structure is always something to worry about when you start a new project. We are always trying to improve our code, and with the way we structure it on Meteor, there is not too much deal about folder structure. We have a /client and a /server folder (there is always a /public, /private /lib folder), so in this tutorial we are going to follow the Meteor standard, with some obvious folders in the /client folder, like /components.

components1

The Best Practices For this tutorial Requirements

Editorhttps://atom.io/

Operating System :Ubuntu 16.04(Latest stable Version)

The Best Knowledge About React  :

https://www.codeschool.com/courses/powering-up-with-react

And Also Javascript Es6 

https://www.codeschool.com/courses/es2015-the-shape-of-javascript-to-come

Referenced Tutorials Are :

Sample Github Repositories :

Conclusion

Should you use React in your next Meteor project?

If you’re just getting started with Meteor – and especially if you’re just getting started with JavaScript development – the simplicity and ease-of-use of Meteor’s Blaze is hard to beat. For smaller apps, MVPs, and hackathons, you’d be hard-pressed to find a more efficient way of building modern, reactive, client-side web apps.

But as your application – and more importantly your team – grows, you may find yourself feeling the pain of unpredictable application state, duplicated code and “jQuery Soup”. In that case I’ve found that React is a great choice for building predictable, scalable apps and feels right at home in a Meteor app.

Meteor Js Web Applications

HI,

 

To create the app, open your terminal and type:

Windows Operating System  To Use   Command Prompt to “meteor” chek meteor installed.

meteor create aboossample   
 'aboossample' is  the project name.

This will create a new folder called aboossample with all of the files that a Meteor app needs:

aboossample.html     // # an HTML file that defines view templates

aboosample.js            // # a JavaScript file loaded on both client and server

aboossample.css        // # a CSS file to define your app’s styles

.meteor        // # internal Meteor files    

To run the newly created app:

cd aboossample

meteor

Open your web browser and go to http://localhost:3000 to see the app running.
Continue reading