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

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

Project Planning

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

3D City Model 3D Character Model
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

Install Node.js. We'll need it to load manage dependencies and to run our build tool.
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

git clone this repo into your project folder path (locally)
install node into your project folder path (server side feature)
install three.js into your project folder path (render 3D graphic)
install vite into your project folder path (local server)
Run server on localhost:8080
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.

aesha98 / the-hive-3D