Custom Canva Model - Three.js #threejsproject #customcanva

We can create a custom canva model in three.js 

The basic implementation is shown below:

Code:

import React from 'react'
import * as THREE from "three";


const CustomCanvaModel = () => {

  const positionedArray= new Float32Array([0,0,0,0,1,0,1,0,0]);

  return (
    <mesh >
        <bufferGeometry>
            <bufferAttribute
                attach="attributes-position"
                count={3}
                itemSize={3}
                array={positionedArray}
            />
        </bufferGeometry>
        <meshBasicMaterial color="red" side={THREE.DoubleSide} />
      
    </mesh>
  )
}

Output:

Full Source Code: https://github.com/singhteekam/threejs