{"id":24236826,"url":"https://github.com/chevp/angular-threejs-websocket-quick-start","last_synced_at":"2026-05-04T15:42:46.669Z","repository":{"id":272205836,"uuid":"915817925","full_name":"chevp/angular-threejs-websocket-quick-start","owner":"chevp","description":"This project is a boilerplate for integrating Angular, Three.js, and WebSocket to build interactive 3D applications with real-time communication.","archived":false,"fork":false,"pushed_at":"2025-01-12T22:27:50.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T23:26:21.660Z","etag":null,"topics":["angular","nodejs","threejs","typescript","webgl","websocket"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chevp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-12T21:54:23.000Z","updated_at":"2025-01-12T22:27:54.000Z","dependencies_parsed_at":"2025-01-12T23:26:32.181Z","dependency_job_id":"a78ecdc0-624f-458c-845d-0ff6690380ef","html_url":"https://github.com/chevp/angular-threejs-websocket-quick-start","commit_stats":null,"previous_names":["chevp/angular-threejs-websocket-quick-start"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chevp%2Fangular-threejs-websocket-quick-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chevp%2Fangular-threejs-websocket-quick-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chevp%2Fangular-threejs-websocket-quick-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chevp%2Fangular-threejs-websocket-quick-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chevp","download_url":"https://codeload.github.com/chevp/angular-threejs-websocket-quick-start/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241868455,"owners_count":20033821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","nodejs","threejs","typescript","webgl","websocket"],"created_at":"2025-01-14T19:48:16.785Z","updated_at":"2026-05-04T15:42:46.212Z","avatar_url":"https://github.com/chevp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Angular Three.js WebSocket Quick-Start\n\nThis project is a boilerplate for integrating Angular, Three.js, and WebSocket to build interactive 3D applications with real-time communication.\n\n## Features\n\n- **Angular Framework**: Modular and scalable architecture for building single-page applications.\n- **Three.js Integration**: Create stunning 3D scenes, animations, and visualizations.\n- **WebSocket Communication**: Real-time data exchange with WebSocket.\n- **Quick Start**: Minimal setup for fast prototyping and learning.\n\n---\n\n## Setup Instructions\n\n### Prerequisites\n\nEnsure the following are installed on your system:\n\n- [Node.js](https://nodejs.org/) and npm\n- [Angular CLI](https://angular.io/cli) (Install with: `npm install -g @angular/cli`)\n\n---\n\n### Steps to Run the Project\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/chevp/angular-threejs-websocket-quick-start.git\n   cd angular-threejs-websocket-quick-start\n   ```\n\n2. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Run the Development Server**:\n   ```bash\n   ng serve\n   ```\n\n   Open your browser and navigate to `http://localhost:4200` to see the app in action.\n\n---\n\n## Project Structure\n\n- **src/app/three-scene.component.ts**: Contains the Three.js 3D scene setup and rendering logic.\n- **src/app/websocket.service.ts**: Handles WebSocket connection and message exchange.\n- **src/app/app.module.ts**: Angular module configuration.\n- **src/app/app.component.html**: Entry point for the app UI.\n\n---\n\n## Sample Code Snippets\n\n### Three.js Scene\nA basic Three.js scene is set up in `three-scene.component.ts`:\n\n```typescript\n// Create a WebGL renderer\nthis.renderer = new THREE.WebGLRenderer({ canvas });\n    \n// Set the size for the renderer to match your desired width and height\nthis.renderer.setSize(780, 365);\n\n// Create a new scene\nthis.scene = new THREE.Scene();\n\n// Create a camera\nthis.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nthis.camera.position.z = 5;\n\n// Create a simple cube\nconst geometry = new THREE.BoxGeometry();\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\nthis.cube = new THREE.Mesh(geometry, material);\n\n// Add the cube to the scene\nthis.scene.add(this.cube);\n```\n\n### WebSocket Service\nThe `websocket.service.ts` provides WebSocket communication:\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class WebSocketService {\n  private socket!: WebSocket;\n\n  connect(url: string) {\n    this.socket = new WebSocket(url);\n\n    this.socket.onmessage = (event) =\u003e {\n      console.log('Message from server:', event.data);\n    };\n\n    this.socket.onerror = (error) =\u003e {\n      console.error('WebSocket error:', error);\n    };\n  }\n\n  sendMessage(message: string) {\n    if (this.socket.readyState === WebSocket.OPEN) {\n      this.socket.send(message);\n    }\n  }\n}\n```\n\n---\n\n## Sample WebSocket Server\nFor testing, use this WebSocket server:\n\n```javascript\nconst WebSocket = require('ws');\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', (ws) =\u003e {\n  console.log('Client connected');\n  ws.on('message', (message) =\u003e {\n    console.log('Received:', message);\n    ws.send(`Echo: ${message}`);\n  });\n  ws.send('Welcome to WebSocket Server');\n});\n```\n\nRun the server:\n```bash\nnode websocket-server.js\n```\n\n---\n\n## Extending the Project\n\n- **Scene Management**: Dynamically update scenes based on WebSocket messages.\n- **UI Enhancements**: Use Angular Material for interactive controls.\n- **Advanced Features**: Load GLTF models and implement animations with Three.js.\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## Acknowledgments\n\n- [Angular](https://angular.io/)\n- [Three.js](https://threejs.org/)\n- [WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchevp%2Fangular-threejs-websocket-quick-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchevp%2Fangular-threejs-websocket-quick-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchevp%2Fangular-threejs-websocket-quick-start/lists"}