๐ Create cool graphics with our Tailwind & React โ๏ธ drawing app! Use Three.js ๐, EaselJS ๐จ, Vite โก, TypeScript ๐ง. Easily draw shapes, move them around, and see them in 3D! Great for developers who want to explore their creativity! โจ
Welcome to the React-ThreeJS EaselJS Drawing App โ a powerful tool for creating 2D and 3D visualizations! This app covers you whether you're looking to draw, manipulate shapes, or view objects in a 3D scene. Let's unleash your creativity! ๐โจ This is the perfect boilerplate to kickstart your drawing projects with React, ThreeJS, and EaselJS! ๐
https://github.com/user-attachments/assets/27ea7167-7dec-4ab3-911e-9e0686a1a496
https://react-threejs-easeljs.web.app/
This project is built using modern technologies:
The project relies on several key libraries:
React: A library for building user interfaces. Three.js: A powerful 3D engine for rendering the 3D view mode. EaselJS: A library for drawing and manipulating 2D shapes. Vite: A fast build tool for modern web development. Lodash: A utility library for working with arrays, objects, and more.
To start the project locally, fork the repo and follow these steps:
1. ๐ด Fork the repository
2. ๐ฅ Clone your forked repository
3. ๐ ๏ธ Run `yarn install` to install dependencies
4. ๐ Run `yarn dev` to start the local development server
The app will run on http://localhost:5173.
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
parserOptions
property like this:export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
tseslint.configs.recommended
to tseslint.configs.recommendedTypeChecked
or tseslint.configs.strictTypeChecked
...tseslint.configs.stylisticTypeChecked
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
Feel free to reach out if you have any questions or need help:
Made with โค๏ธ in ๐ Istanbul, using React โ๏ธ, Three.js ๐, EaselJS ๐จ, TypeScript ๐ง, Vite โก, and Lodash ๐ ๏ธ!