https://github.com/mooncat126/threejs-control-game

🐺 An interactive 3D game built with Three.js and Next.js and Vue.js, featuring a controllable models and various 3D objects.
https://github.com/mooncat126/threejs-control-game

fxb gifloader nextjs three-fiber threejs threejs-example threejs-learning vuejs

Last synced: 2 months ago
JSON representation

🐺 An interactive 3D game built with Three.js and Next.js and Vue.js, featuring a controllable models and various 3D objects.

• Host: GitHub
• URL: https://github.com/mooncat126/threejs-control-game
• Owner: mooncat126
• Created: 2024-08-15T14:18:10.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-24T02:32:52.000Z (4 months ago)
• Last Synced: 2024-09-28T23:42:55.562Z (3 months ago)
• Topics: fxb, gifloader, nextjs, three-fiber, threejs, threejs-example, threejs-learning, vuejs
• Language: SCSS
• Homepage:
• Size: 112 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Three.js Control Game Examples

This repository is dedicated to storing various Three.js examples. 


Each example demonstrates different features and functionalities of Three.js in interactive 3D environments. 


For more details, please refer to the README files in each folder.


## Three.js Wolf Control Game

[English](./wolf-control-game/README.md) | [简体中文](./wolf-control-game/README_zh.md)

An interactive 3D game built with Three.js and Next.js, featuring a controllable wolf model and various 3D objects.

### Features

preview: https://threejs-wolf-control.netlify.app/

![画面収録 2024-08-16 22 11 27 (3)](https://github.com/user-attachments/assets/5b8fe404-d1e8-40a9-96a3-30e1be14f605)

- **🐺 Controllable Wolf**: 

  - `Arrow Keys(↑↓←→)` to move the wolf

  - `Shift Key` to run

  - `Space bar` to make it sit or stand

- **✨ 3D Environment**: 

  - Includes a dynamic starry background, buildings, and a ground plane.

- **🖥 Responsive Design**: 

  - Works seamlessly across different screen sizes.

***

## Three.js Office Scence (Vuejs)

[English](./office-scene-vue-model/README.md) | [简体中文](./office-scene-vue-model/README_zh.md)

This project showcases a 3D office scene built using Vue.js and Three.js. It features interactive elements such as a rotating chair, animated video screens, and theme switching with dynamic lighting and material effects.

### Features

preview: https://threejs-office-scene.netlify.app/

![画面収録 2024-08-18 22 01 12](https://github.com/user-attachments/assets/c72da59a-cf2c-4035-8c36-15284f110611)

- **💡 Controllable Lamp**: 

  - click lamp to turn it on/off

- **✨ 3D Environment**: 

  - Includes a dynamic background and a ground plane.

- **🖥 Responsive Design**: 

  - Works seamlessly across different screen sizes.