23 Jun 2021

Threejs CatmullRomCurve3 Tutorial/Example+Demo


In this post I am going to show you That how you can use THREE.catCulRomCurve class's object in your project.

CatCulRomCurve3 is used to create a smooth declined curve path between 2 or even more than 2 given points in 3D environment.

Let's see How to implement THREE.CatCulRomCurve3.


var point = [];
point.push([1,0,1], [1,0,-1] , [-1,0,-1], [-1,0,1]);


const curve = new THREE.CatmullRomCurve3(
    point.map((e)=>{
           return  new THREE.Vector3(e[0], e[1],e[2])
               })
               );
               curve.closed = !false;
               curve.tension = .1;
CalmulRomCurve3 constructor take an Array of three dimensional points, more than 2. In above example I have taken 4 points to create square like paths.

point.map creates an new Array with given 4 points.

CatmullRomCurve3.getPoint( int : division );


var vertices = [];

curve.getPoints(100).forEach((e)=>{
    
    vertices.push(
            e.x, e.y, e.z
                );
                });
                
CatmulRomCurves.getPoints( int : division) method returns Array of point accordingly division value. More division value give your path smooth curves at corner.

vertices array is used for geometry's position attribute.

var geometry = new THREE.BufferGeometry();

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );



var material  = new THREE.LineBasicMaterial({});

const curveObject = new THREE.Line( geometry, material );

//Adding to Scene
s.add(curveObject);
 
Explanation : ... updating
20 May 2021

Threejs Quaternion Simple Example Tutorial


Today I am going to explain that how can you use Threejs Quaternion to rotate an object? And Lot of other things to do with the helps of quaternion will be easy for you by reading the post.

17 May 2021

Reactjs Event Tutorial


Today in this tutorial, I am going to share with you that How can you work with Event in Reactjs. Here I am going to put Simple example of Event implementation in Reactjs project.

Here is most simple example of Event Handling in React.

function App(){

var click = ()=>{

alert("Event is being Handled!");

} 

return <h1 onClick={click}> Hi, Reactjs Event Handling </h1>;

}

//Renders the Component UI in document

ReactDOM.render( , document.getElementById("root"));

Above I have given javascript onClick event example. But lots of others javascript event are available.
To implement javascript event, event Attribute name should be in Camel case 🐫 format.

Event Attributes for React.

  • onClick - this one event you have see above.
  • onMouseOver - this event excuted when html element having touched for a while.
  • onMouseOut - it is opposite to above one onMouseOver.
15 May 2021

Write the name and use of 10 Javascript inbuilt functions.

Posted by  

Hello guys, Today i am going to share with you javascript 10 inbuilt function and a breaf description of its uses. Javascript has lots of in-built Function, But the question is here to only 10 inbuilt function. Therefore here I will share 10 in-built function that i know.

Window

In javascript Window is Function. That can be retrieved in javascript as already declared variable. Name is window . Window Function of javascript must get through window . it hasn't constructor like new Window() .

  <script>
 console.log(window); //return [Window object]
 
 console.log(window.innerHeight); //return browser's window Height in pixel
 
 console.log(window.innerWidth);//return Browser's window width in pixel
 
 window.alert("Hello World"); // alert window with provided string.
  
  </script>
  

Math

How to use Threejs dat.GUI graphical UI to change the Javascript Variables?


In this post, I am going share with you a tool/Utility method that will help you to change javascript variable through meaningful User Interface UI componet.

dat.GUI is javascript framework which is used to manipulate the javascript parameter variables upon UI (User Interface).

Import dat.GUI

<script SRC="https://threejs.org/examples/js/libs/dat.gui.min.js"> <scrip>
Copy the above given CDN link to your webpage head section.

dat.GUI Usage Example

Under the dat.dui script CDN link, Create a new one script tag.
const GUI = new day.GUI(); 

var params = { 

    color : [ 0, 0, 0 ] 

};

For Color

gui.addColor(params, "color").name("Color").onChange(function (value){ 

// Value is an Array like [230, 3,55] 

});