23 Jun 2021

### Threejs CatmullRomCurve3 Tutorial/Example+Demo

Posted by

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, e,e)
})
);
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 );

```
Explanation : ... updating
20 May 2021

### Threejs Quaternion Simple Example Tutorial

Posted by

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

Posted by

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 = ()=>{

}

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

</script>
```

## Math

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

Posted by

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>
```

## 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]

});

```