0. 前言

文本主要介绍使用Three.js导入 Objects 并模仿 paperplanes 设计一个网页应用。

Demo - Paper planes。 应用数据部分放在 firebase database 里面，可能需要翻墙才能访问。

主要设计是这样，先导入球和纸飞机模型，然后让纸飞机可以绕着球随便飞，当然要有一个路径，但是保证路径上每一个点，飞机都是朝自己所飞的方向就行。用户主要操作是这样，左边可以放飞一个纸飞机，右边是随机抓取一个纸飞机。

1. Grad Project Milestone 1

Description of project

The goal of this project is to try to use instagram or Pinterest API to generate an online gallery. Users can search on the search bar and the website will use these APIs to get images related to the keywords. Also, user can type in multiple blogers’ username and we can generate a online gallery only by their posts.

1. Project 2 Milestone 1

Description of project

The goal of this project is to try to use three.js to build a scene with paper planes surrounding a planet. Then I use firebase API to store the paper planes data.

The Visual Design part illustrates a overview of the project.

The original deisgn is:

• User first come the website, then type message and location. Click submit.
• Then a paper airplane will fly in the scene with the message.
• Also, user can click the net icon to get one message from a paper airplane.

Here the messages and paper planes information are stored in a firebase database. And when user type location, it will call Google Map API to know the location of the user.

1. Project 1

1.1 Project 1 Milestone 1

Description of your project

I want to design a game about migration-refugee. In the game your job is an immigration inspector to control the people entering your country. You need to inspect the immigrants and visitors to to find hidden terrorists, smugglers and so on. The indented audience for this site should be the people that care about immigration issues. The inspiration is from the game called Papers, Please. It’s kind of a web version of this PC game.

1. Portal

1.1 Design for Class Portal

Mainly use material design to construct the portal. There are some basic requirements for the portal:

• Have sections for labs, projects
• Include the link to the project journal
• Should use responsible web design to vary in different devices

1. Install database

In this post, we just use mysql as the database. You can use other databases as well.

1. Download IntelliJ IDEA Ultimate

You can apply for student in JetBrains. It’s free. Application Link.
After applying for student account. Download the IntelliJ IDEA Ultimate.

本文主要记录网页和ppt一些字体选择的hint。

1. 设计原则

1.1 四大基本原则

• 对比（Contrast）避免页面上的元素太过相似。如果不同那就截然不同。
• 重复（Repetition）要设计的要素在作品中重复出现。
• 对齐（Alignment）每个元素应该与另一个元素有某种视觉联系。
• 亲密性（Proximity）彼此相关的项应当靠近。

对于亲密性，根本目的是实现组织性，要看哪些孤立的元素可以归为一类组成更亲密的组合，成为一个视觉单元。避免页面上有太多孤立的元素。不要因为有空白就把元素放在角落或者中央。不同组的元素不要建立关系。如果不想关，那么就要分开。

1. Portal

Design for Class Portal

2. Project 1

Design for Project #1

3. Project 2

Design for Project #2

4. Grad Project

Design for Grad Project