Three.JS Wireframe Animator

---

Table of Contents

• Overview
• About Three.JS
• Instructions
  • Install dependencies and run application
• Scene Setup
  • Scene Component Overview
  • Setting up a Scene
    • Object Definition
    • Camera Position
    • Field of View (fov)
• Example Scenes
  • Scene One
  • Scene Two
  • Scene Three
  • Scene Four

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.

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;
    

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)

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

scene_1.mp4

Scene Two

scene_2.mp4

Scene Three

scene_3.mp4

Scene Four

scene_4.mp4