2.2 Sprint 2 - JeanyDeVries/ilojo-bar Wiki

Talk with Joost

Our standup with Joost went well. We talked about our first contact with the client and how it all went. We didn't had any time to code yet so we talked about what Femke wanted and how we implemented it in our concept.

Talk with the client

This time we had something to show to our client. We had our concept plus already some code that shows how it would look like. Femke was positive of the 3D building someone had made for us, only the angel was a bit too big. The styling corresponded with the buidling and it's history. We had a nice setup with our visualisation of the user experience. She was happy we used her panels/windows idea to show the stories. The only thing she wanted was a visual of all the panels of the building and then let it zoom in to the specific panel. She also wanted a fallback if the 3D model would't work. She said a video with a zoom in of the building would be nice. Pepijn and Julian had a checkbox to switch between an image and the 3D model. This way the users who do not have enough power to load the model could still see the building and use the site. This is something I wanted to implement to our project as well.

My part

Three.js

On monday I worked further on three.js and I made it work. I thought I had to import some files from the node modules, but I could just add the files I needed locally. This worked!

https://user-images.githubusercontent.com/44086608/174752111-b28614cd-7854-4e2f-9aec-82223dd46f71.mp4

To start with three.js you first need to create a scene with assets, like the camera or lighting. I then could load the model using the fbx loader. You can use multiple loaders but I chose fbx, because this is a pretty standard type to save 3D object (obj is also one of them). The most important part is that I added the object to the scene, this way three.js sees it as something that needs to be rendered.

fbxLoader.load(
    'models/building.fbx',
    (object) => {
        object.scale.set(.25, .25, .25)
        buildingObj = object;
        scene.add(object)
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log(error)
    }
)

I then let the building rotate horizontally. Plus I disabled the controls of the users so that it could not zoom in our out. The only controls the user had was to drag the building horizontally. I also added a transparent background so it could fit the rest of the html elements in there.

    //disable vertical movement plus zooming
    controls.minPolarAngle = Math.PI/2;
    controls.maxPolarAngle = Math.PI/2;
    controls.enableZoom = false;
function animate() {
    requestAnimationFrame(animate)

    if(buildingObj)
        buildingObj.rotation.y -= 0.005;

    controls.update()

    render()
}

Next/previous API

We needed to have the option to go to the next or previous stories when in the story pages. So I dove into the API we made. I added methods that calculated which was the next or previous story and returned the url we needed. Sadly in our code we had to -1 the ID because in prismic the id could not start on 0 (this happends before the function here below). Then we just use the new ID in the stories array from the API to get the last story. In our html I checked if the url existed and if not it would not show the button. So if there was no previous story, the button 'previous' would just be hidden.

function getPreviousStory(id, stories){
    if(id < 0)
        return;
    let previousId = id - 1

    let previousStory = stories[previousId];
    return previousStory;
}
<% if(previous){ %>
   <btn class="button" type="button">
       <a href= <%-previous.url%>>Previous</a>
   </btn>
<% } %>

New model

We got our new model as well. So I implemented it and changed it a bit to our liking. I changed the looks a bit so it would fit the liking of our client better, made the angel smaller and the building whiter (she said the building was white). Plus they were some vertices missing, so I made sure the planes and vertices were alligned correctly.

Old model:

New model:

Home screen

I made a base of the home screen. The model would be shown in the middle and a discover button would be shown on the bottom of it.

Switch image/3D model

At last I made a checkbox to switch between the image and the 3D model. The 3D model only loads when the checkbox is enabled. We chose this, because loading the 3D model on default could be impossible for many people living in Nigeria. These people have slow internet and most of them do not have the best phones, so we needed to keep in mind that the site cannot cost a lot in performance. So we let the users decide if they want to see it or not.

https://user-images.githubusercontent.com/44086608/174756843-b7638f9f-8c00-4c5d-9b5a-39ae4b0c364b.mp4

⚠️ **GitHub.com Fallback** ⚠️