3D Voice Weather Ball (source sharing)--Create rotatable 3D Ball

Opening nonsense:

Participated in a website competition in September, the title of which was to use the services provided by the third party platform to make creative works.

So I choose to use voice services, weather services, unity3d,android to make a 3D voice weather forecast, I call it called 3D Voice weather ball (good soil ... ）

Although I did not win the award but I think there are some things more creative in this project, so I intend to share it, maybe someone will use it.

The following is a simple look:

On the left is unity made after running on the computer

On the right is unity with Android and voice control after running on the phone (the phone will not do GIF):

It's not bad.

Project Introduction:

Project structure:

First, the development of this project is divided into the Android and Unity3d terminals:

Android side:
The Android side is mainly responsible for the Voice control module and 4 buttons, and the speech processing results delivered to the unity side to do processing

Unity3d End:

The Unity side is responsible for receiving the information passed from the Android voice processing, and 4 key feedback.
And according to the situation of different provinces and cities in real-time from the Internet to obtain weather information, analytic display in our production of 3D ball.

Build:
Finally put the Android code in the form of plug-ins into the unity side, and then build the APK file on the unity side to run on the phone.

Business Introduction:

Initial interface:

There is a simple dynamic bar at the top of the initial interface to display some hints.

Under the dynamic bar is a provincial name title and average temperature.

The most central "dynamic ball" shows the distribution of provinces across the country. And according to the average temperature of the provinces and cities to set different colors to roughly reflect the national weather conditions (the more red indicates the higher the temperature, the more blue means lower).

Detailed page:

After you select a province (you can select the mouse or gesture, if you can select the voice on your phone), click Details to go to the detailed page.

Displays weather information for all cities in the current province on the Detail page, and a small picture of the weather trend is displayed on the "Dynamic Ball".

If you select a city and click Details again, the city's detailed weather information, including wind speed ultraviolet rays, is displayed above the screen.

Functional Division:

Although the project function is relatively simple, but the code is also written a lot, the key is a lot of places to quickly complete the function, also did not consider some framework and structure, so the logic seems particularly chaotic.

for the sake of clarity, I am going to make a detailed introduction to this project in several articles. Because I think this kind of chunking is not only clear-minded, but also can be viewed on demand, but also avoid writing in an article resulting in a smelly and long logic confusion.

I'm going to cover this project in four articles:

One: Create a rotatable "3D ball"

Second: Through the weather Service, get real weather information from the network and generate "3D ball" dynamically

Three: Android voice service and unity messaging

IV: Combination of Unity3d end and Android terminal

Let's introduce how to create this rotatable "3D ball" today:

Creation of 3D Balls

The following is a pure version of the code that I removed from all the other modules, and today's task is to complete it:

Can be shown,

In this "3D" ball, the average distribution of these "small pieces."

Each piece in this example shows a heading and a row of details.

Of course, you can also display pictures in each block, showing the model. And there can be more ideas, such as 3D ball in each small block is a 3D ball, so recursive loop down this is not our universe (think more, hurriedly run back ...) ）

Principle Composition:

Let's take a look at the following 3 illustrations:

Believe that through the above diagram, we should almost know how this 3D ball and the "small piece" on the sphere is composed.

Yes, the 3D ball is composed of a big ball and a number of small balls, the ball attached to the ball, the ball is responsible for the control of rotation, the ball will be the corresponding rotation.

Just a little more detail:

The big ball is a "transparent/invisible" object that has a physical collider property, so it can be rotated.

All the balls are evenly distributed over the ball, the ball is also "Transparent/invisible", but the ball will attach text and pictures, etc., the ball will always rotate with the ball and the text direction forever facing the camera.

This dynamic 3D ball can be completed with the simplest of the basic grammar and knowledge points of unity after figuring out the above.

Code Explanation:

The following content solution requires a certain unity foundation, and unity is easy to get started with. My habit is to first look at the most basic video tutorials (must be people out, must be simple without brains), after reading crossing Web documents, and then to search a few big God blog to see.

The blog of two great Gods is highly recommended here: The Rain Pine Momo Institute, the Ink 50% frost

1. Create a big ball

First you need to build a big ball

By: Menu-gameobject-create other-sphere to create a sphere (sphere)

Adjust the size and position of the ball. Point out his mash Renderer, so the big ball is "invisible".

3. Create a small ball preset

The small ball is generated dynamically by the code, but we need to make a small ball preset first.

The method and make the same big ball, but need to add a text mesh to the ball to display the text, if in addition to display text also need to show some other things in the ball, you can build an empty gameobject add the corresponding components, The gameobject is then added to the ball to form a whole (prefab preset).

This example shows the city name and simple weather information, the city name is added directly to the ball, the simple weather information on the other gameobject, the size of the small ball into the formation of a whole.

4. Dynamic generation of small balls

This, I think, is the hardest part of the whole project, and his difficulty is to figure out the coordinates of the ball in terms of the number of balls.

In simple terms, the average dividing point on the surface of the sphere and the three-dimensional coordinates of each point are calculated.

If I can figure out it's the big god ... Fortunately there is Google, I found in Google an algorithm as follows:

FLOAT inc = Mathf.pi * (3-MATHF.SQRT (5)), float off = 2/n;for (int k = 0; k < (N); k++) {Float y = k * off-1 + (o FF/2); float R = mathf.sqrt (1-y * y); float phi = k * INC; Vector3 pos = new Vector3 ((Mathf.cos (PHI) * R * size), y * size, Mathf.sin (PHI) * R * size); }

N is the average number of copies to be divided. Size is the diameter of the split ball, and R is the big ball radius.

The Vector3 type of POS in the For loop is the computed three-dimensional coordinates. I do not know what this algorithm is the principle of mathematical good hope to explain.

more algorithms for dividing points on a sphere can try searching for keywords on google: distributed points on Sphere

Once the coordinates of each point are calculated by the algorithm, the ball can be created by the following code:

Gameobject Text = (gameobject) instantiate (Textobject, POS, quaternion.identity);

Textobject is the small ball preset that we've done before, POS is the ball coordinates that we've just calculated. The effect of creating all the balls in the final loop is as follows:

5. Set the ball text and color

Creating a Gameobject object named text above is our small ball. Below you will set the father, color, size, center text, details for each ball.

Set the ball to the father of the ball (put the ball on the ball) Text.transform.parent = gameobject.transform;//Gets the Textmesh component of the ball Textmesh TM = (textmesh) text. Getcomponent<textmesh> ();//Set Text Tm.text = City.getname ();//Set Color Tm.color = City.getweathercolor ();// Set the size Text.transform.localScale = City.getsize ();//The child that gets the ball (that is, the gameobject added in the ball, there is only one display detail) foreach (transform Child in Text.transform) {Textmesh tm2 = (textmesh) child. Getcomponent<textmesh> (); tm2.text = City.gettempture (); tm2.color = City.getweathercolor ();}

6. Set ball orientation, transparency, color

Because the whole ball is constantly rotating, so the ball on the ball of the direction, transparency, and color will constantly change. So you need to adjust the various properties of the ball in real time.

In the update () function:

Traverse the ball in the ball, set the direction of the ball, the transparency, the color foreach (Transform child in Gameobject.transform) {//the ball is always facing the camera child. LookAt (New Vector3 (cameratarget.position.x, CAMERATARGET.POSITION.Y,-cameratarget.position.z))//Set the ball's transparency by distance, The result of the farther and more transparent effect of float dis = vector3.distance (child.position, cameraTarget.transform.position); Color c = child.renderer.material.color;float Alpha = mathf.abs (dis-r)/5f + 0.1f;//set the ball and its sub-gameobject colors child.rendere R.material.color = new Color (C.R, C.G, C.B, Alpha); foreach (Transform cc in child.transform) {Cc.renderer.material.color = new Color (C.R, C.G, C.B, Alpha);}}

3D rotation of the ball:

Above we have basically set the ball behind the ball and its body (now they are a whole).

Now we need to make them spin, so we need to add a collider to the big ball so we can click on it and rotate it.

Component-physics-sphere Collider

Gesture/mouse rotation can be performed with the following code (if fast rotation has an effect that gradually slows to a final stop)

Initialization

is dragged//     private bool Ondrag = false;//rotation speed//    private float = 3f;  Damping speed//     private float tempspeed;//The mouse moves horizontally in increments//  private float AxisX;  The mouse moves in the vertical direction of the increment//private float axisy;    Sliding distance (mouse) private float cxy;

override the mouse press and drag function:

Mouse movement Distance    void OnMouseDown () {   //Accept mouse pressed Event//AxisX = 0f;axisy = 0f;   }  Mouse drag operation void Onmousedrag () {  Ondrag = TRUE;AXISX =-input.getaxis ("Mouse X"); Axisy = Input.getaxis ("Mouse Y"); cxy = Mathf.sqrt (AxisX * axisX + axisy * axisy); Calculate the length of the mouse movement//if (Cxy = = 0f) {cxy = 1f;}     }      

Calculate damping (to achieve the slower effect mentioned above)

Calculates the damping velocity of float Rigid () {  if (ondrag) {tempspeed = speed;} else {if (Tempspeed > 0) {  //by dividing the length of the mouse movement by dragging longer slows down the slower C9/>if (Cxy! = 0) {tempspeed-= speed * 2 * TIME.DELTATIME/CXY;}} else {tempspeed = 0;}         }  return tempspeed; }

Finally, in the update function, judge:

Rotates the ball gameObject.transform.Rotate (new Vector3 (Axisy, AxisX, 0) * Rigid (), Space.world () according to the calculated damping and the offset of the x, Y axis; If the mouse leaves the screen then mark as no longer dragging if (! Input.getmousebutton (0)) {Ondrag = false;}   

Written at the end:

All the code above is just a thought and some necessary steps. If you are interested, you can download its source code to see.

GitHub Address:https://github.com/a396901990/3D_Sphere

I'm going to cover this project in four articles:

One: Create a rotatable "3D ball"

Second: Through the weather Service, get real weather information from the network and generate "3D ball" dynamically

Three: Android voice service and unity messaging

IV: Combination of Unity3d end and Android terminal

today is the first article, the remaining I will be updated as soon as possible, please look forward to ...
Ps:unity3d I only have a few things that just get started very elementary, there may be many wrong places, I hope you can correct me.

3D Voice Weather Ball (source sharing)--Create rotatable 3D Ball