Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lbaiyat/three-js-wireframe-animator
React.js project using the Three.JS 3D graphics library to animate a 3D wireframe of a scene with given input files.
https://github.com/lbaiyat/three-js-wireframe-animator
3d 3d-graphics javascript react three-js threejs
Last synced: about 2 months ago
JSON representation
React.js project using the Three.JS 3D graphics library to animate a 3D wireframe of a scene with given input files.
- Host: GitHub
- URL: https://github.com/lbaiyat/three-js-wireframe-animator
- Owner: lbaiyat
- Created: 2024-05-09T20:15:21.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-27T22:24:55.000Z (8 months ago)
- Last Synced: 2024-05-28T08:10:00.806Z (8 months ago)
- Topics: 3d, 3d-graphics, javascript, react, three-js, threejs
- Language: JavaScript
- Homepage:
- Size: 1.54 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Three.JS Wireframe Animator
Overview:
This is a project created in React.js using the Three.js 3D graphics library.
The application creates a scene based on specified models and constraints, and will then animate
drawing the wireframe(s) of the 3d representation of the object model(s).
About Three.JS:
Three.js is a cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser using WebGL. It simplifies the development of 3D content by providing an extensive set of tools and features for rendering, animating, and interacting with 3D objects.
Instructions:
Follow the process below to get the application running.
Install dependencies and run application
npm run start;
Scene Setup
Scene Component Overview
The SceneComponent module is set up to allow multiple object definitions and options
for each individual object, such as coordinate positioning and color. These objects
are defined as a list of json objects and passed into the SceneComponent object, along with
camera coordinates, and the desired field-of-view value.
Creating a new Scene
To create a new scene, add a new module with a component function that renders a SceneComponent object.
```jsx
import SceneComponent from "../components/SceneComponent";
function SceneExample() {
const objects = [
{
file: 'path/fileName.txt',
xOffset: 0,
yOffset: 0,
zOffset: 0,
speed: 8,
color: 0xff0000
},
];
const cameraCoordinates = {
x: 0,
y: 0,
z: 0
};
const fov = 20;
return (
)
}
export default SceneExample;
```
Object Definition
The objects field a list that defines which object to draw, the location, speed of animation, and the color.
- file: This should be a text file containing 3 space-seperated points, with 1 point per line.
(Example below)
```text
1.000 0.000 0.000
0.992 0.126 0.010
0.968 0.249 0.020
0.929 0.369 0.030
0.876 0.483 0.040
0.808 0.589 0.050
.
.
.
```
- xOffset: The X-Coordinate Position of this object.
- yOffset: The Y-Coordinate Position of this object.
- zOffset: The Z-Coordinate Position of this object.
- speed: The speed of the animation for this object.
- color: The color that this object should be.
Camera Position
This will determine the camera position in the scene, which is defined by the specified
x, y, and z coordinate values.
Field of View (fov)
This field corresponds to the extent that objects in the scene are visible. A higher value will
make the objects in the scene look further away, and a lower value will make them seem closer.
Example Scenes
Scene One
https://github.com/lbaiyat/three-js-wireframe-animator/assets/30711209/a3196825-fe1e-4121-b20b-bb789b790de7
Scene Two
https://github.com/lbaiyat/three-js-wireframe-animator/assets/30711209/2f8e8e96-6ccb-4fd1-b096-b85ace041469
Scene Three
https://github.com/lbaiyat/three-js-wireframe-animator/assets/30711209/07dc392a-cd35-46c9-9658-7f5c8f347395
Scene Four
https://github.com/lbaiyat/three-js-wireframe-animator/assets/30711209/40e9bdf3-f32d-40cc-ba94-8146604dafde