Dr Martin White
Mobile Web 3D Applications
Basic Responsive 3D App
Copyright By PowCoder代写 加微信 powcoder
Creating a Basic Mobile First Web 3D App
Table of Contents
Introduction 2
Review Week 1 to Week 3 Results 3
Creating the Basic 3D App 4
Develop your Lab 4 basic 3D App 4
Create the new fluid grid layout — Summary Steps 5
Create the new fluid grid layout — the detail 5
Consider the 3D Contents layout 18
Consider the camera buttons panel 20
Add the X3D Model 25
Interaction 3D Buttons 33
JavaScript code for 3D model Interaction 33
3D Image Gallery 34
Complete the HTML5 and CSS3 for coke.html 35
Create the Sprite and Dr Pepper pages 41
Add some About and Contact Contents 41
Lab 5 — Interactivity with JavaScript and PHP 43
Appendix 44
Appendix 2 — Previous Lab Results 44
Week 1 Results 44
Week 2 Results 44
Week 3 Results 47
Appendix 2 — Plugins for 3D Apps 50
Appendix 3 — Steps to Create your Basic 3D App 52
Appendix 4 — Connecting buttons to X3D code via JavaScript in X3DOM 54
Introduction
This Lab 4 focuses on creating a basic responsive and mobile web 3D application (3D App) by bringing together the previous laboratory results (week 1 to 3) and re-enforcing the knowledge gained so far by:
Continuing your investigation into X3DOM (X3D + HTML5) from Lab 3 as a method for embedding or integrating your 3D models directly into the HTML document object model (DOM). You should have an X3DOM Coke can output created by the instantreality online converter and/or the same using the instantreality aopt cmd line tool. Similarly, for the Sprite bottle and the Dr Pepper cup. Having these models in X3DOM format will eventually allow you to manipulate your model’s X3D nodes (via JavaScript) in the HTML5 web page.
· JavaScript will be investigated in Lab 5 and 6 in this respect
Gathering up all your results from Week 1 to 3 into a basic responsive 3D App (i.e. a responsive and mobile first Web 3D application)
· This will involve refining your Lab 1 fluid grid template somewhat.
· If you haven’t installed Bootstrap yet, i.e. you are still relying on the CDN versions, please do install instead.
Review Week 1 to Week 3 Results
You should have 3 keys sets of results from the previous 3 laboratories. You can see in Appendix 2 — Previous Lab Results what your results should look like. If you have not finished these or achieved these results you need to correct or catch up. The Live Feedback Site located at (http://users.sussex.ac.uk/~martinwh/3dapp/labs/) also gives you the correct results and codes so that you can compare and contrast.
Creating the Basic 3D App
It is possible, but becoming increasingly harder to integrate plugins to render 3D in a web browser, thus largely making plugins a non-viable technology for a good 3D App. Appendix 2 — Plugins for 3D Apps on the Web discusses this is more detail, suffice to say we will not be using 3D plugins in your 3D App. However, we will use a couple of 3D tools (including one plugin) to test our VRML after exporting from 3ds Max to make sure it works before conversion to X3D.
Develop your Lab 4 basic 3D App
We will now develop our Bootstrap based Lab 4 basic 3D App based on your Lab 1 template, for example see Figure 1. You can check this out on the Live Feedback Site.
Home Page — desktop
: X3DOM — tablet
pepper Page: X3DOM — mobile
Sprite Page: X3DOM — desktop
Figure 1: Example layout and CSS styling for the simple responsive 3D App.
Create the new fluid grid layout — Summary Steps
We will adapt our Lab 1 Bootstrap template to create our Lab 4 (4 page — home.html, coke.html, sprite.html, and pepper.html) result — a basic 3D App that integrates your Lab 3 X3D models inline. From a design perspective, very roughly, you will end up with 4 pages in your 3D App:
· Home page: This will be the original lab 1 template, but you might like to investigate how to replace the main_3D with a Bootstrap carousel into which you can insert rendered 3D images of your models
· Coke page: We will redesign the Lab 1 template to exploit Bootstrap .card classes to hold the X3D model, description and some buttons to select views.
· Sprite page: same as coke
· Dr Pepper page: same as coke
If you are already fairly competent with Bootstrap, etc. you could just read the steps outlined in Appendix 3 — Steps to Create your Basic 3D App and crack on, otherwise follow the more detailed instructions below.
Create the new fluid grid layout — the detail
Open up your text editor, preferably Visual Studio Code. Copy your Lab 1 files over to lab 4. You will adapt the index.html file, add new CSS to the custom.css and create the coke.html, sprite.html and pepper.html files.
You will be adapting and reusing the Lab 1 template by exploiting some Bootstrap components, e.g. the .card class — We will, by and large, leave you to explore the other Bootstrap components.. We will set up the grid layout for the Bootstrap components as we go along, but we can sketch out the overall fluid grid design now
· Desktop layout — we will keep the existing 3 fluid grid columns
· We will create 5 main elements using three cards:
· Main Contents — a fluid container for the 3D, camera buttons gallery images, and description
· Camera Buttons — group these in a .card class with the 3D model; this may eventually form an interaction panel
· 3D Model — Again, place the X3D model in a .card class.
· Gallery Links — Create thumbnails in a .card class.
· Drinks Text — Again, the .card class should take care of this.
· Use the same header and footers as lab 1 — but, we may refine these
· Tablet layout
· Same as desktop layout
· Mobile layout
· Single stacked column for all elements
To accommodate the above design, we will need to adapt the custom.css templates from Lab 1.
There is a couple of ways we can do this; you can simply continue to update your Lab 1 templates, etc. But, that means overwriting your Lab 1 results, not a good idea. For example, your tutors need to keep track of Lab 1, Lab 4, Lab 5, and so on results so that we can keep intermediate results to illustrate roughly where you should be by the end of each weeks lab work — that is the Live Feedback Site.
You should do the same as your tutor, for convenience. In which case to start, you should copy your Lab 1 work into a Lab 4 folder as mentioned above, and make sure all paths to CSS or JavaScript files are updated to reflect the new location. Also, any paths to background images or other media contents may need to be updated. This should be all automatic if you have made all paths relative inside your Lab 1 result!
Check your Lab 4 site works ok, i.e. that you have a new live Lab 4 version that is identical to your Lab 1 work.
Next copy your index.html file to create a coke.html file; you will adapt this new coke.html (based on your index.html) file. Figure 2 illustrates the new Lab 4 starting point copied from the index.html page to create the coke.html page. We have just taken a snapshot at the beginning, in a few minutes when we start to edit the coke.html code and its associated CSS you won’t see that page in its current form again.
You may have to adjust the fluid grid parameters, etc. We will keep the same header and footer for now because we set them up ok in Lab 1.
This design is focused on putting three elements on top of the background image (main_3D_image). It is not the most elegant of designs. We are merely trying to illustrate the process of updating the CSS and integrating 3D, etc. We may change the layout later.
Figure 2: Fluid grid coke.html copied from the index.html ready to modify
You now need to start adapting this new coke.html page with new CSS layout and styling rules, which will involve setting up the following fluid grid layout as follows.
Step 1: Remove the columns with the Sprite and Dr Pepper .card components and set the coke .card component column to class=”col-sm-12″. Also, remove the coke image. This will make the Coke text contents stretch across the page. But, we retain the fluid properties of the .card class. See Figure 3. You can put all the original text back that you edited in Lab 1 if you wish, it should be in your assets/texts folder. Later, such contents will be asynchronously updated from a back-end server. Also, use the .container-fluid class for header, main contents and footer. That was easy, hooray for Bootstrap!
It shouldn’t be lost on you that by copying over the lab 1 template, although we will end up with a new design, we will for now keep the header and footer code and other useful codes (HTML and CSS).
Figure 3: Step 1 — Removing Coke image, and the Sprite and Dr Pepper columns for the coke.html page
Step 2: You should reconfigure the layout for the 3D model, camera view buttons, and gallery links so that you end up with something like that illustrated in Figure 4. We haven’t put any design focus into this, that’s down to you, for now it is functional — save your design efforts for the assignment.
We decided above that we would use a Card, but we could consider other Bootstrap components such as a Modal or Jumbotron to hold the 3D model.
The Bootstrap card has no problems embedding an X3D model, so let’s use the Bootstrap card component to hold a X3D model. Further, we will use a card header with navigation to switch between models. If you head over to the Bootstrap Components Card page you can grab an example piece of code there that you can adapt quite easily, you will need to navigate to the Card component page.
So far, from Step 1, you should have organised your coke.html to have 2 rows, with the first row holding two cards and the second row holing one card in the main_contents. We will use the RHS card component in the first row to hold the 3-image gallery illustrated in Figure 4, and the LHS card to hold the 3D model context. So, with 1 card for the 3D Model context, one card for the gallery context and one card for the coca cola text context we can get something like that show in Figure 4. And, we haven’t even done any CSS yet, other than that already done in Lab 1. We are relying on Bootstrap to do the heavy lifting so far — effectively we have just juggled the index.html content around t develop a template for the coke.html page.
Temporarily, we have used the backdrop main_3D image as a placeholder for the X3D model. You may recall we also over wrote the .card class border in your Lab 1 custom.css file. Again, temporarily, until we finalise our CSS code we will put the 1 pixel border back so we can see the arrangement of the cards.
Figure 4: Step 2 — Initial adaptation of index.html into coke.html using three Bootstrap 4 cards
Clearly, we need to pay attention to styling with CSS yet. But, that’s not bad for throwing in a handful of Bootstrap components.
Ok, let’s look at how we code up the HTML5 using Bootstrap components to achieve the layout shown in Figure 4, starting with the main contents section, see Figure 5.
Figure 5: The Coke.html page with the header, main_contents and footer
Here, we can see that we have the header and footer as before, and also we have kept the .main_contents class we created in Lab 1. So, this layout is the same, essentially as the home page (index.html).
However, we are going to leave the header and footer as is, and reorganise the main contents section to hold 2 rows, so let’s expand that, see Figure 6 — we might find later that the .main_contents class is now obsolete. Clearly, here we can see that we have used two .row classes to hold our main contents for the coke.html page.
Figure 6: main contents section composed of two rows
Let’s look at the first row of the main contents section, this should hold the X3D model and the gallery code. We can see that we have set the column width to sm-10 for the X3D model, and sm-2 for the 3D image gallery, see Figure 7.
Figure 7: Two columns inserted to hold the X3D model and the 3D image gallery
Let’s look at the X3D model card, see Figure 8. Here, you can that we have used the Bootstrap nav–tabs class to give us access to the coke, Sprite and Dr Pepper X3D models. Between the card header and the body, we intend to put the X3D model, but for now we have a temporary image. Then, we have the usual card body title and text. This is followed by a temporary group of 4 buttons to represent the camera view and animation controls. Later, we will look at the buttons in more detail, e.g. we may use button groups and other fonts, etc. You will need to enter this code, take care to avoid any mistakes.
Figure 8: X3D model card with navigation header, image, body with image, title, text and buttons
Clearly, we need to do some CSS styling here, the nav-tabs for example, and the buttons, we will do this last after we have insert the X3D model. BTW, this section of code can be adapted from the Bootstrap Card example on the Bootstrap site, and modified, of course. You can see we have three .nav-item classes with associated .nav-link classes and one set to active.
Let’s look at the 3D Image gallery, see
Figure 9. Later on you could render, in 3ds Max, a 3D image of each of your X3D models, which can then be used as thumbnails in this gallery. We can also connect these to a Bootstrap .modal class to show an enlarged version with more information about the X3D model. But for now, we will use the images from the Lab 1 template.
Figure 9: The 3D image gallery in a card, with 3 temporary images
There is nothing new here, we have seen the card before, but clearly we need a way to overwrite the Bootstrap CSS. For example, some vertical spacing between each image
The really interesting thing so far is that because we are actually using Bootstrap classes, which are already styled in the bootstrap.css, we can effectively rough out a reasonable design quite quickly that is fluid and works. If you don’t use a library like Bootstrap, for example, you would need to create thumbnail classes for yourself, Bootstrap provides all this, and the .card class has it all built in. Finally, let’s look at the drinks text row, see Figure 10.
Figure 10: The coke drinks text inserted in a card without a header or image
So, what to do next. The only thing that is really bugging me is the 3D Image gallery spacing, but we can quickly overwrite the Bootstrap .img-thumbnail class. Examine it in the Chrome Inspect Tool, copy the CSS and add a margin-top: 4px; and add this to the xs media break in your CSS file.
.img-thumbnail {
padding: 0.25rem;
margin-top: 5px;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
max-width: 100%;
height: auto;
We have left all the attributes here even though we are only adding the margin-top, just in case we end up tweaking some other attributes later. All, that will happen is that the original attributes will get overwritten with the, well original attributes for now.
Similarly, we can examine the Bootstrap .nav-tabs class and overwrite it. However, be aware if you use it elsewhere you will need to have a contextual class around it. These are the .nav-tabs class we just lifted from the Chrome Inspect Tool. Modify them as desired and stick them in your custom.css file.
/* Lifted form the bootsrap.css file, and modified to emulate the nav-bar menu styling */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #760003; /* Font color for active font */
background-color: #3399ff; /* Blue color for background */
border-color: #dee2e6 #dee2e6 #fff;
.nav-tabs .nav-link {
color: white;
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
/* Added this to emulate the nav-bar link styling */
.nav-tabs .nav-link:hover {
color: green;
border: 1px solid transparent;
There are other CSS styling that you can do later, for example:
· The card header background colour can be changed,
· Remove the border as a whole, or individually control each edge border,
· Play around with the column size, and so on. We just changed the X3D Model and 3D Image Gallery to 9 and 3.
· Change the colour of the header texts, title texts and general text
· Investigate button groups
· Replace the actual buttons with awesome fonts
· Create your own fonts for each button function
But, for now that will do, see Figure 11.
Figure 11: The new layout for Coke.html with minimal CSS changes.
You should be aware that we won’t necessarily tell you every little detail here as we move forward, it should be obvious by now that you may need modify CSS for each media screen break. You can always consult the final result in the Live Feedback Site, and reverse engineer.
That wraps up the basic creation of the main contents part of the coke.html page. There is more work to do here later, i.e. add the model3D and style the camera view and animation buttons, etc. not to mention actually inserting the 3D.
Figure 12 illustrates the current result for the mobile xs and desktop xl layouts. I’ll leave you to continue improving the CSS. Tip, you need to be looking use the Chrome Developer Tool to inspect what Bootstrap CSS is going and override it where appropriate.
Figure 12: The Mobile and Desktop layouts.
So, Figure 11 and Figure 12 now show the header and footer finished (for now) for all the three screen breaks and also the gallery images styled (for now).
Consider the 3D Contents layout
At the moment, because we are using the .card class we have more or less defaulted to having the X3D model at the top of the card, below the model navigation tabs, simply because when you look at the Bootstrap specification for cards, this is where they say an image can go. We have a short title and description ready for the X3D model below the model and then we have insert some temporary buttons. But, you may prefer a totally different layout. Have a play around with the layout. For example, consider:
· Putting the X3D model at the middle, see Figure 13 — note we would need to apply margins to the X3D block element, and also the buttons to get a better alignment. But, we am not doing it now, as I will revert back to my previous arrangement in a minute.
· Move the buttons to the top, for example incorporate them into the nav-tabs, see Figure 14. Here, we have simply copied over my drop-down menu from the nav-bar in the header. Obviously, it is using the CSS styles intended for the nav-bar. So, clearly, as mentioned above you will need to change the context of the styling for the nav-bar to be independent of the nav-tab.
· Put the buttons vertically to one side or the other — this will require placing them in their own column, thus you would need to space out for three columns: buttons, X3D and Gallery; we will leave you to have a go at this.
Have a play around and come up with your preferred version. You will need to consider how your design works in mobile first, of course.
Figure 13: X3D model in the middle, no positioning of the X3D and buttons done yet
Go ahead and add the drop down navigation on the X3D model card as indicated in Figure 14.
Figure 14: Add a drop down navigation to the X3D Model card nav-tab
Consider the camera buttons panel
Eventually, when you have finished your 3D models in 3ds Max, you will add a number of cameras, e.g. a perspective camera, a shot from the front, top, and so on. These camera views in X3D will link to the camera or view buttons in your 3D App. We suggest, just to get started, that you create a small subset of possible buttons with which to attach to their corresponding camera views later in Lab 5, something like:
This might be too many buttons for the mobile view, but eventually you may use other techniques to collapse the camera buttons, e.g. a drop-down camera menu, or smaller fixed sized icons developed from font awesome, etc. To better style the buttons, also we will create a .camera-btns class.
We will use Bootstrap’s button stack for our camera
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com