Three Seed screenshot

Three Seed

Author Avatar Theme by Edwinwebb
Updated: 10 Dec 2022
403 Stars

A Three.js starter project with ES6 and Webpack

Overview:

The Three Seed Three.js starter project is a boilerplate bundled with Webpack, designed to help users get started on their next three.js project. It provides a simple scene, camera, and renderer to view imported GLTF assets. The project allows users to edit the code and make changes to the objects in the scene. It also supports importing local files and modules from the web. The final project can be built and uploaded to a web server. The starter project is licensed under MIT.

Features:

  • Simple Setup: The project provides a ready-to-use scene, camera, and renderer, allowing users to quickly start building their three.js projects.
  • GLTF Asset Viewing: Users can import and view GLTF assets within the scene, allowing for easy visualization and manipulation.
  • Code Editing: Users can edit the code for the objects in the scene and see the changes in real-time in the browser. Debug console messages are displayed if there are any errors.
  • Local File Import: Local files, such as images and 3D models, can be imported and loaded asynchronously with three.js, expanding the possibilities for asset usage.
  • Module Import from NPM: Users can search and install additional functionality from the NPM repository, enhancing the capabilities and features of their project.
  • Support for Three.js Examples: The project provides solutions for common issues when using examples from the three.js docs, allowing users to easily incorporate more complex examples into their projects.
  • Web Building: Once the project is complete, users can bundle it using the terminal command npm run build, resulting in a build folder that can be uploaded to a web server for deployment.

Installation:

To install the Three Seed Three.js starter project, follow these steps:

  1. Ensure that you have Node and NPM installed, and that you are comfortable with terminal commands.
  2. Choose one of the installation methods below.

Install via Download:

  • Download the zip file of the project and extract it to a folder.
  • Open terminal and navigate to the folder containing the extracted project.
  • Run the command npm install to set up the project dependencies.
  • To start the development server, run the command npm start.

Install with Git:

  • Open terminal and navigate to the directory where you want to clone the project.
  • Run the command git clone [project_url] to clone the project.
  • If desired, delete the git folder to start with a fresh project.
  • Open terminal and navigate to the project folder.
  • Run the command npm install to set up the project dependencies.
  • To start the development server, run the command npm start.

Running the development server To see the changes made to the starter project, navigate to the project folder in the terminal and run the command npm start. This command will bundle the project code and start a development server at http://localhost:8080/. Open this URL in your web browser to view the scene with the rotating island and flower.

Summary:

The Three Seed Three.js starter project is a valuable resource for anyone looking to start a three.js project. It provides a simple setup with essential components, allowing users to quickly view GLTF assets and make changes to the scene objects using code editing. Additionally, it supports importing local files and modules from the NPM repository for added functionality. The project can be easily built and deployed to a web server once completed. Overall, this starter project simplifies the process of getting started with three.js and offers flexibility for customization and expansion.