✨ ThreeJS Toys ⚡

Related tags

Learning resource webgl threejs creative-coding interactive
Overview

✨ ThreeJS Toys - Made with 💙

NPM Package Build Size NPM Downloads Twitter

Work in progress...

Sponsors (Thanks 💙 !!!)

Usage - npm

npm install three threejs-toys

Toys

Particles Cursor - https://codepen.io/soju22/full/KKQaGrE

import { particlesCursor } from 'threejs-toys'

particlesCursor({
  el: document.getElementById('app'),
  gpgpuSize: 256,
  colors: [0x00ff00, 0x0000ff],
  color: 0xff0000,
  coordScale: 1.5,
  noiseIntensity: 0.001,
  noiseTimeCoef: 0.0001,
  pointSize: 5,
  pointDecay: 0.005,
  sleepRadiusX: 250,
  sleepRadiusY: 250,
  sleepTimeCoefX: 0.001,
  sleepTimeCoefY: 0.002
})

Neon Cursor - https://codepen.io/soju22/full/wvyBorP

import { neonCursor } from 'threejs-toys'

neonCursor({
  el: document.getElementById('app'),
  shaderPoints: 16,
  curvePoints: 80,
  curveLerp: 0.5,
  radius1: 5,
  radius2: 30,
  velocityTreshold: 10,
  sleepRadiusX: 100,
  sleepRadiusY: 100,
  sleepTimeCoefX: 0.0025,
  sleepTimeCoefY: 0.0025
})

Noisy Lines- https://codepen.io/soju22/full/YzePgPV

import { noisyLinesBackground } from 'threejs-toys'

noisyLinesBackground({
  el: document.getElementById('app'),
  colors: [0x0231c3, 0xa6d1f6],
  minStroke: 0.5,
  maxStroke: 2,
  timeCoef: 0.0002,
  coordScale: 2,
  displacementScale: 0.02
})
You might also like...

🍰 An extensible, layer based shader material for ThreeJS

🍰 An extensible, layer based shader material for ThreeJS

lamina 🍰 An extensible, layer based shader material for ThreeJS These demos are real, you can click them! They contain the full code, too. 📦 More ex

Jan 6, 2023

Ektogamat Three Graces Design Concept using threejs

Ektogamat Three Graces Design Concept using threejs

In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks.

Dec 18, 2022

A basic USDZ file (Pixar Universal Scene Description) loader for ThreeJS

Three USDZ Loader A basic USDZ (binary Universal Scene Description) reader for Three.js The plugins supports animation as well as loading multiple USD

Dec 13, 2022

Futuristic tank game. Pure JavaScript with ThreeJS. Open Source

Futuristic tank game. Pure JavaScript with ThreeJS. Open Source

Retro-futuristic tank game. Pure JavaScript with ThreeJS. Open Source SYNTHBLAST.COM Gameplay shoot tanks Run over all yellow pads to advance a level

Dec 11, 2022
Comments
  • Aveces anda y aveces se queda con este error

    Aveces anda y aveces se queda con este error

    Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at init (three.js:43:16) at three (three.js:38:3) at index$1 (index.js:28:3) at NewCombin.jsx:5:1

    opened by corbaz 1
  • codepen copy

    codepen copy

    Hello !

    I saw your super awesome example on codepen toy swarm , I absolutely love this code ! Thanks for sharing it.

    I copied all of the code into my VS Code folder (index, css, js) but it did not work, unsure why. I have three js installed and have the import function as you have provided. I did see that on threejs it says using node can be problematic, i do have nodejs installed but did not run the code using node. I am sure there is some simple explanation on why that I haven't thought about. Anyway, thanks for sharing.

    opened by PythonCoderUnicorn 2
Owner
Kevin LEVRON
Kevin LEVRON
GitHub
Ektogamat Three Graces Design Concept using threejs

In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks.

Anderson Mancini 81 Dec 18, 2022
A basic USDZ file (Pixar Universal Scene Description) loader for ThreeJS

Three USDZ Loader A basic USDZ (binary Universal Scene Description) reader for Three.js The plugins supports animation as well as loading multiple USD

Pierre-Olivier NAHOUM 37 Dec 13, 2022
Futuristic tank game. Pure JavaScript with ThreeJS. Open Source

Retro-futuristic tank game. Pure JavaScript with ThreeJS. Open Source SYNTHBLAST.COM Gameplay shoot tanks Run over all yellow pads to advance a level

Brian Risk 107 Dec 11, 2022
Adaptation of Threejs BasisTextureLoader for OGL

ogl-basis-texture-loader Adaptation of Threejs BasisTextureLoader for OGL Usage ⚠️ Copy basis-transcoder directory to your public directory. // import

Jesper Vos 15 Feb 10, 2022
A Chrome T-Rex game remake using javascript and threejs. Online demo: https://rossning92.github.io/t-rex

T-Rex Game in 3D A Chrome T-rex game remake using javascript and threejs. Build the code Make sure you have node 12+ installed: https://nodejs.org/en/

null 79 Dec 29, 2022
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np

Arno Di Nunzio 120 Dec 23, 2022
This is a particle animation art piece using threejs.

3d-particle-mofing ● DEMO Usage Clone repository Install Node.js Create an .env file and copy the contents of .env-sample. Run following commands np

Hisami Kurita 23 Oct 28, 2022
Jeu d'énigmes sur la cathédrale d'Amiens avec ThreeJS

TranseptSud -Cath. Amiens Jeu à la 1ère personne sous forme d'énigmes pour faire découvrir une anecdote sur la cathédrale d'Amiens. About The Project

Safi Hanifa 1 Dec 21, 2021
Modern ThreeJS boilerplate powered by Vite & Typescript

Modern ThreeJS ⚡️ Modern ThreeJS boilerplate powered by Vite & Typescript. Features Powered with Vite ?? GUI controls using Tweakpane ?? Typescript ??

Alvaro Saburido 64 Jan 4, 2023
Very simple threejs boilerplate in VanillaJS to start your projects. There is only a basic scene, a load model method and a simple webpack.

Ektogamat ThreeJS Boilerplate by Anderson Mancini Introduction This is a three.js starter project with only 120 lines. But why create another threejs

Anderson Mancini 524 Jan 3, 2023