/the-hive-3D

The Hive Interactive (Three.js)

The Hive 3D

The Hive Interactive 3D City (Three.js) This uses Vite as web server Node.js as server-side client feature

Project Objective

  1. to produce an interactive 3D city model using 3.js Library

Project Planning

  1. Render 3D File into Three.js
    • Set up development environment 💻
    • Explore three.js 🚀
    • ???
  2. Asset Development

    3D City Model 3D Character Model

  3. Implement behaviour

    Walking Around the City Display city/ place information and SDG related

Setting Up Development Environment

Project Structure

  • Every three.js project needs at least one HTML file to define the webpage.
  • JavaScript file to run the three.js code.
Default structure & naming
  • index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="/main.js"></script>
	</body>
</html>
  • main.js
import * as THREE from 'three';
...
  • public/
    • Textures, audio, and 3D models will go here.

Installation

Install with NPM and a build tool

  1. Install Node.js. We'll need it to load manage dependencies and to run our build tool.
  2. Install three.js and a build tool, Vite, using a terminal in your project folder. Vite will be used during development, but it isn't part of the final webpage. If you prefer to use another build tool, that's fine — we support modern build tools that can import ES Modules.

Steps

  1. git clone this repo into your project folder path (locally)
  2. install node into your project folder path (server side feature)
  3. install three.js into your project folder path (render 3D graphic)
  4. install vite into your project folder path (local server)
  5. Run server on localhost:8080
  6. Start coding!

Note (contributors only)

Note

Provided below is a reference to help guide you when updating the documentation in this repository

Basic writting & formatting syntax GitHub Docs.