-
Notifications
You must be signed in to change notification settings - Fork 0
/
project six.html
162 lines (109 loc) · 6.21 KB
/
project six.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Land of Mirabile Visu by Lu Xu </title>
<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat:400,600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo:500|Open+Sans:300,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="images/logo-x4-01.png">
</head>
<body>
<main>
<!--
<nav>
<div role="navigation" class="content-wrapper" >
<ul>
<li class="a"><a href="index.html" title="Home">Home</a></li>
<li class="a"><a href="work.html" title="Work">Work</a></li>
<li class="a"><a href="play.html" title="Play"> Play</a></li>
<li class="a"><a href="About%20me.html" title="About">About</a></li>
</ul>
</div>
</nav>
-->
<nav>
<ul class="contact-list-1">
<a href="index.html"><img class='logo' src="images/logo-x4-01.png"> </a>
<li >
<a class="NAV" href="work.html" >WORK</a>
<a class="NAV" href="About%20me.html" >ABOUT</a>
<a class="NAV" href="play.html" >RESUME </a>
</li>
</ul>
</nav>
<section class="projects-1">
<!-- <header>-->
<div class="content-wrap">
<h2> Land of Mirabile Visu </h2>
<img src="images/A1%20Poster%205.jpg" alt="image" >
<!-- <h2 class="project-name">Week of Hope </h2>-->
<h3> Concept </h3>
<p> Welcome to the dream land of Mirabile Visu, where things are coated with romance. The main attractions - Tower & Maze in Land Mirabile Visu are created with the conceptual combination of coral and camilla typologies. Tower is created by combing Fibonacci sequence of flower typology with coral shape. Four types of flower are at the edge of corals, which are made to float in the game. Maze is built with 18 layers of corals shaped as a three-layered flower. Flower pedals are at the edge of corals.
</p>
<section class="overview">
<div class="titles">
<p> <b> My role </b></p>
</div>
<div class="contents">
<p> Worked in a team of two to design and develop an immersive Unity 3D game with models created in Rhino (Grasshopper). We worked together to build Rhino models and create the game scenes in Unity. I designed the game poster and put together the concept video.
</p> </div>
<div class="titles">
<p> <b> Tools </b></p>
</div>
<div class="contents">
<p> Rhino | Grasshopper | Unity 3D
</p>
</div>
<div class="titles"> <p> <b> Timeframe </b></p></div>
<div class="contents">
<p>3 months (2020) </p>
</div>
</section>
<h3> Structure </h3>
<p> We started with building Tower and Maze models in Rhino and then imported models to Unity 3D to create the complete scene. Game players can start with wondering in the maze until they find the tower. Upon arriving at the foot of the tower, players need to climb up to the top of the tower. On the way up, they will encounter giant floating flowers.
</p>
<h3> Concept video </h3>
<!-- <iframe width="800" height="500" class="play" src="https://www.youtube.com/embed/CZUOWJhOeJ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
<iframe width="800" height="500" src="https://www.youtube.com/embed/p-3ttbKutCo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section class="projects-1">
<div class="content-wrap ">
<section class="project-description">
<section class="project-item-1">
<a href="project%20two.html">
<img class="con" src="images/Untitled-4.png" alt="walkthru">
<p class="item-description">
<h3 class="nextproject"> Next Project →
</h3>
</a>
</section>
</section>
</div>
</section>
</div>
</section>
<!-- ************ CONTACT INFO / SOCIAL MEDIA ************ -->
<footer>
<div class="content-wrap">
<span style='font-size:30px;'>🙋</span>
<h2> Let's Chat
</h2>
<!-- Social media and contact links. Add or remove any networks. -->
<ul class="contact-list">
<li>
<li> <a class="footer" href="mailto:luxu.designer@gmail.com">luxu.designer@gmail.com</a>
<a class="footer" href="https://www.linkedin.com/in/lu-xu-93705744/" target="_blank">LinkedIn</a>
<a class="footer" href="https://github.com/lu-designer" target="_blank">Github</a>
<a class="footer" href="https://www.openprocessing.org/user/186529/" target="_blank">OpenProcessing </a>
</li>
</ul>
<p class="copy">
Designed & Coded by Lu Xu © 2020
</p>
</div>
</footer>
</main>
</body>
</html>