The Hive Interactive 3D City (Three.js) This uses Vite as web server Node.js as server-side client feature
- to produce an interactive 3D city model using 3.js Library
- 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
- Every three.js project needs at least one HTML file to define the webpage.
- JavaScript file to run the three.js code.
- 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.
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.
- 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
Provided below is a reference to help guide you when updating the documentation in this repository
Basic writting & formatting syntax GitHub Docs.