https://github.com/graffiti75/simcity
A 3D model of Sim City game created using Three JS
https://github.com/graffiti75/simcity
3d 3d-graphics node simcity three-js threejs visual-studio vscode
Last synced: 2 months ago
JSON representation
A 3D model of Sim City game created using Three JS
- Host: GitHub
- URL: https://github.com/graffiti75/simcity
- Owner: graffiti75
- Created: 2025-05-10T21:01:34.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-03T00:44:45.000Z (about 1 year ago)
- Last Synced: 2025-06-29T19:08:51.829Z (12 months ago)
- Topics: 3d, 3d-graphics, node, simcity, three-js, threejs, visual-studio, vscode
- Language: JavaScript
- Homepage: https://graffiti75.github.io/SimCity/
- Size: 593 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Create a Three.js VITE project
```
npm init -y
npm install three
npm install --save-dev gh-pages vite @types/three http-server
```
# Create `package.json`
```
{
"name": "homeworld",
"version": "1.0.0",
"type": "module",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"start": "vite",
"build": "vite build",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist -m '< add commit message >'"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"three": "^0.176.0"
},
"devDependencies": {
"@types/three": "^0.176.0",
"gh-pages": "^6.3.0",
"http-server": "^14.1.1",
"vite": "^6.3.5"
}
}
```
# Create `index.js`
```
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// Set up scene, camera, and renderer
const scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Add light
scene.add(ambientLight);
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x33aaff);
document.body.appendChild(renderer.domElement);
// Add orbit controls
// const controls = new THREE.OrbitControls(camera, renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Create grid for X-axis (XZ plane)
const gridXZ = new THREE.GridHelper(20, 20, 0x00ff00, 0x444444);
gridXZ.position.y = 0;
scene.add(gridXZ);
// Create grid for Y-axis (YZ plane)
const gridYZ = new THREE.GridHelper(20, 20, 0xff0000, 0x444444);
gridYZ.rotation.z = Math.PI / 2;
gridYZ.position.x = 0;
scene.add(gridYZ);
// Add coordinate axes
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// Position camera
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);
// Handle window resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
```
# Create `index.html`
```
3D Grid Interface
body { margin: 0; overflow: hidden; }
canvas { display: block; }
```
# Create `vite.config.js`
```
export default {
base: "/ThreeWorld/",
server: {
open: true,
},
};
```
# Create `.gitignore`
```
node_modules/
dist/
.vite/
```