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).
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.
Follow the process below to get the application running.
npm run start;
To create a new scene, add a new module with a component function that renders a SceneComponent object.
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 (
<SceneComponent objects={objects} cameraCoordinates={cameraCoordinates} fov={fov}/>
)
}
export default SceneExample;
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) - 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.
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
.
.
.
This will determine the camera position in the scene, which is defined by the specified x, y, and z coordinate values.
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.