Giter Club home page Giter Club logo

mapas's Introduction

Experincing Mapas (With Spline)

This project was initially started with simple CSS models of DIT buildings but then the scope is enhanced with blender's 3D models. A basic starting blender base model.

Phase 2(The wiser & wider scope)

Blender

Merely started in the mid of April, I already started collecting photos of buildings, rooms, floors from different corners of college. All this for creating 3D models with blender

Spline

I chose spline cause it's easy here to make your model just like blender and import it in your react code using spline react viewer tool. 2nd and most important factor is that u don't have to learn the fng complex 3JS just to display a model in your webpage.

Spline really got my back and I have made 80% models with spline again. Why again; cause blender models sucked in case of size and takes around 3-4 sec to load just 1 model at a time (I'm taking the case when internet speed is pretty good). Now just think of those poor connections.NIGHTMARES!!

To solve this problem , I had to revisit every element of the imported blender model to spline and take out the abnormal one and make it again from spline.

Getting Started

I'm assuming you know how to setup a react project. Will go direct to the folloup part-

  1. Class can be searched either by just searching on the search box or selecting class manually from given list of classes from different buildings.
    image

image



2. You will be redirected directly to the results on click on any of the class you wanna search a) Information regarding the class including CSS based architecture of the building in which the class is present. image



b) 3D model of the floor in which the class is present.(Yup; initially one has to find the class in the whole floor by him/herself. However individual directions might be made to each class)
image

I - 'Spot the cloud for फront or बack Entrance to the floor!'.


फ and ब

On clicking this button(present at the bottom-right corner of the model), it redirects to the actual फront/बack paths image.

***Develop button is disabled in the About section. Will be enabled after active participation. DO KNOT GENERATE A PR WITHOUT ANY INFO!***

How to use models

PC

Rotate:- left click
Span:- Right click

Mobile

Rotate:- 2 fingers
Span:- 3 fingers

Future Steps

  1. Individual pathway to each class[Model-based]
  2. Including Vishwakarma building and CSS architecture of Workshop building.[HTML.CSS.React]
  3. Back entrance for each floor[Model-based]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.