Skip to content

Instantly share code, notes, and snippets.

View ektogamat's full-sized avatar
👋

Anderson Mancini ektogamat

👋
View GitHub Profile
@ektogamat
ektogamat / MeshTransitionMaterialFree.jsx
Last active October 30, 2024 14:10
Mesh transition Material Free version - Smooths the color transition
// Created by Anderson Mancini @2024
// Check documentation on how to use it at https://codesandbox.io/p/sandbox/meshtransitionmaterialfree-l7pzn7
import React, { useRef, useMemo } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import { easing } from 'maath'
export default function TransitionMaterialFree(props) {
const materialRef = useRef()
@ektogamat
ektogamat / Forest.jsx
Last active July 15, 2024 11:13
A simple FakeForest Component for React Three Fiber by Anderson Mancini
/*
Copyright(c) June 2024 Anderson Mancini
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
@ektogamat
ektogamat / Confetti.js
Created May 10, 2024 00:21
Confetti V2 for React Three Fiber
// CONFETTI COMPONENT V2 BY ANDERSON MANCINI - CC 2024
// If you use, please credit it :)
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { Instance, Instances } from '@react-three/drei'
/**
* ExplosionConfetti component creates a confetti explosion effect in a three.js scene.
@ektogamat
ektogamat / AnimateCamera.jsx
Created March 14, 2024 01:22
useGSAP with React Three Fiber Camera Animation
import { useThree } from '@react-three/fiber'
import { gsap } from 'gsap'
import { useGSAP } from '@gsap/react'
export default function AnimateCamera() {
// Accessing camera from Three.js
const { camera } = useThree()
useGSAP(() => { // The new hook will take care of context and life cicle.
gsap.fromTo( // Creates the animation
@ektogamat
ektogamat / FakeGlowMaterial.js
Created February 2, 2024 22:09
FakeGlowMaterialThreejs
/**
* FakeGlow material by Anderson Mancini - Fec 2024.
*/
import { ShaderMaterial, Uniform, Color, AdditiveBlending, FrontSide, BackSide, DoubleSide } from 'three';
class FakeGlowMaterial extends ShaderMaterial {
/**
* Create a FakeGlowMaterial.
*
@ektogamat
ektogamat / FakeGlowMaterial.ts
Created January 29, 2024 18:26
Fake Glow Material for React Three Fiber Type Script Version
import React, { useMemo } from "react";
import { shaderMaterial } from "@react-three/drei";
import type { Object3DNode } from "@react-three/fiber";
import { extend } from "@react-three/fiber";
import type { Material, Side } from "three";
import { AdditiveBlending, Color, FrontSide } from "three";
import type { ColorRepresentation } from "three";
/**
* @typedef {Object} FakeGlowMaterialProps
@ektogamat
ektogamat / FakeGlowMaterial.jsx
Last active March 21, 2024 04:57
Fake Glow Material for React Three Fiber
import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import { shaderMaterial } from '@react-three/drei'
import { extend } from '@react-three/fiber'
import { Color, DoubleSide, AdditiveBlending } from 'three'
/**
* @typedef {Object} FakeGlowMaterialProps
* @property {Number} [falloff=0.1] - Controls the value of the Falloff effect. Ranges from 0.0 to 1.0.
* @property {Number} [glowInternalRadius=6.0] - Controls the internal glow radius. Ranges from -1.0 to 1.0. Set a darker color to get the fresnel effect only.
@ektogamat
ektogamat / HolographicMaterialVanilla.js
Last active December 3, 2023 18:03
HolographicMaterial for Vanilla Three.js
/**
* Holographic material by Anderson Mancini - Dec 2023.
*/
import { ShaderMaterial, Clock, Uniform, Color, NormalBlending, AdditiveBlending, FrontSide, BackSide, DoubleSide } from 'three';
class HolographicMaterial extends ShaderMaterial {
/**
* Create a HolographicMaterial.
*
@ektogamat
ektogamat / HolographicMaterial.js
Last active September 16, 2024 21:36
HolographicMaterial for React Three Fiber
/**
* Holographic material component by Anderson Mancini - Dec 2023.
* Dec 7th - Added useMemo for better performance
*/
import React, { useRef, useMemo } from 'react'
import { shaderMaterial } from '@react-three/drei'
import { extend, useFrame } from '@react-three/fiber'
import {
Color,
@ektogamat
ektogamat / Confetti.js
Last active November 8, 2023 21:46
Confetti Component for React Three Fiber
// CONFETTI COMPONENT BY ANDERSON MANCINI AND ROMAIN HERAULT
// Based on: https://github.com/JamesChan21/threejs-confetti
// Based on: https://github.com/daniel-lundin/dom-confetti
// If you use, please credit it :)
import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
/**