Project is built with Three.js graphics library. In Three.js I want to build simple library or functinality, what can easily detect player collision with world objects. For collision detection I would use raycasting.
Milestone 1 (03.03)
- Create Three.js project (1h)
- Create basic 3D models (6h)
- Start planning collision detection (0.5h)
Project is built with Three.js JS module, what is implemented in basic HTML project, so it can be started and launched easily.
Current models have been made with Blender and Textures are added, learned how to scale texture, so it would fit with object.
Basic ground generation is added.
First person control is added.
Collision detection plan
3D models have rays and player has rays and if they intercept, then there is collision.
Milestone 2 (17.03)
- Implement collision detection according to the plan. (4h)
- Make world object placement simpler, CreateObject (2h)
- Add settings panel. (0.5h)
- Movement key detection refactored. (0.5h)
Basic solution is built with raycasting, currently it works by creating ray from camera position and checks if in front of camera happens intersection with objects. Settings panel added, so user can change movement speed. Movement key detection rebuilt, currently active keys set.
Milestone 3 (31.03)
- Make collision detection more robust add edge cases. Add more rays, must be optimized solution. (3.75/4h)
- Implement some world builder solution. (4.25h/3h)
Basic object placement solution is built. Current object is shown by text in upper-right corner. Between objects can be switched with Q and E buttons and placed with Space buttons. Objects are saved locally to browser. World objects can be also deleted. GUI solution with images design is implemented. Collision detection is improved by creating many rayvectors between range 0 to 1 for collision detection.
- Add more functions to world builder - rotation, scale, position, color, deletion, selection. (4.5h, took time 8h)
- Create better models for world builder. (2.5h, took time 2h)
Biggest change was switching to Vue framework, makeing data reactive and more easily managable by user interface. Possibility to select world objects for editing. User has possibility to change object position, rotation, scale, color, delete and every change is saved locally. Made 3 new models: house, car, A10. Glass material was created so models what have children named 'Window', their material will be replaced with glass material.
- Make object editing more comfortable by adding possibility to drag objects around, select axis and rotate around the axis with mousewheel. (5h)
- Make models coloring more eyefriendly. (3h)
- Add multiple language support. (1h)
Draggable objects make editing much easier for user and also possibility to select axis and rotate around it with mousewheel makes everything even better. Models before were not very eyefriendly, but now coloring has changed and also contrasts are visible, directional lighting added. User has also possibility to select between language EST & ENG.
- Add multiplayer support, where there exist one world, where users can place objects. (5h)
- Create more world objects, 6 objects (2h)
Multiplayer was implemented with PHP, what stores objects into MySQL database. Objects are loaded by user sending id's with lastUpdate timestamp, backend will add object id's that are missing and updates objects, what have lower timestamp. Objects are removed by returning object id's that weren't present in database and were sent back to user.