3D voice Balloon (source code sharing)-create a rotated 3D ball and 3d voice

3D voice Balloon (source code sharing)-create a rotated 3D ball and 3d voice

Opening nonsense:

In May September, I participated in a website competition on the subject of creative works using services provided by a third-party platform.

So I chose to use the voice service, weather service, Unity3D, and Android to create a 3D voice weather forecast. I named it a 3D voice sky Balloon (good land ...)

Although I did not win the prize, I think there are still some creative things in this project, so I plan to share them and some may use them.

Let's take a look at the following:

On the left side, Unity runs on the computer.

On the right side, Unity runs on the mobile phone after combining Android with voice control (the mobile phone does not do GIF ):

Isn't it bad...

Project Introduction:

Project Structure:

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

Android:
Android is mainly responsible for the speech control module and four buttons, and passing the speech processing results to the Unity end for processing.

Unity3D end:

The Unity side is responsible for receiving the information transmitted after the Android voice processing and the feedback of four buttons.
In addition, the weather information is obtained from the Internet in real time based on different provinces and cities. After analysis, it is displayed on our 3D ball.

Build:
Finally, the Android code is put into the Unity side as a plug-in, and then Build the apk file on the Unity side to run in the mobile phone.

Business introduction:

Initial interface:

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

The title and average temperature of a province and city are displayed in the dynamic column.

The middle "dynamic ball" shows the distribution of provinces across the country. In addition, different colors will be set based on the average temperature of the province and city to reflect the weather conditions throughout the country (the more red, the higher the temperature, the lower the blue ).

Details page:

After selecting a province (you can select a province by mouse or gesture, or select a province by voice on your phone), click details to go to the details page.

The weather information of all cities in the province is displayed on the details 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 detailed weather information of the city, including wind speed and ultraviolet rays, is displayed on the top of the screen.

Function division:

Although the function of this project is relatively simple, the Code has been written a lot. Many of the key points are to quickly complete the function, and some frameworks and structures are not considered. Therefore, the logic looks messy.

I have prepared several articles to describe this project in detail for a clear idea. In my opinion, this part is not only clear-cut, but can also be viewed as needed. In addition, it also avoids the smelly and long logic confusion caused by writing in an article.

I have prepared four articles to introduce this project:

1. Create a rotated 3D ball"

2. obtain real-time weather information from the network through the weather service and dynamically generate a "3D ball"

3. Android voice service and Unity message delivery

4. Combination of Unity3D and Android

Today, we will introduce how to create a rotated 3D ball ":

3D ball Creation

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

Display,

In this "3D" ball, many "small pieces" are evenly distributed ".

In this example, each part shows a title and a line of details.

Of course, you can also display images and 3D models in each part. In addition, there can be more ideas. For example, every small part of the 3D ball is a 3D ball, So recursive loop is like this is our universe (think too much, run it back ...)

Principles:

Let's take a look at the following three figures:

I believe that through the figure above, we should know how the 3D ball and the "small block" on the sphere are formed.

Yes, this 3D ball is composed of a large ball and several small balls. The ball is attached to the large ball. The big ball is responsible for controlling the rotation, and the ball turns accordingly.

A little more details:

A large ball is a "transparent/invisible" object. It has the property of a physical collision so it can be rotated.

All the small balls are evenly distributed on the large balls. The small balls are also "transparent/invisible", but the ball will attach text and images to the ball. The ball will always rotate with the big ball and the text will always face the camera.

After understanding the above, we can use the simplest basic syntaxes and knowledge points of Unity to complete this 3D ball that can be dynamically rotated!

Code details:

The following content requires a certain degree of Unity. It is easy to get started with Unity. My habit is to watch the most basic video tutorials first (it must be made by Chinese people and be simple and brainless), read the documents on the official website, and search for blogs of great gods.

Here we strongly recommend the blogs of the two great gods: the MOMO Research Institute of Yusong, And the blogs of mohalf chengshuang.

1. Create a dashboard

First, you need to establish a big ball

Use the menu-GameObject-create other-sphere to create a sphere)

Adjust the size and position of the dashboard. Click His Mash Renderer so that the ball is "invisible.

3. Create a small ball preset

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

The method is the same as making a big ball, but you need to add a Text Mesh to the ball to display the Text. If you need to display some other things on the ball in addition to the Text, you can create an empty GameObject to add the corresponding component, and then add the GameObject to the ball to form a whole (prefab preset ).

In this example, the city name and simple weather information are displayed. The city name is directly added to the ball, and the simple weather information is placed on another GameObject. After the size is adjusted, it is placed into the ball to form a whole.

4. Dynamic ball generation

I think this step is the most difficult part of the project. It is difficult to calculate the coordinates distributed on the ball based on the number of balls.

Simply put, we divide points evenly on the sphere surface and obtain the three-dimensional coordinates of each point.

If I can figure it out, it's a big God... Fortunately, Google, I found an algorithm in Google 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 + (off / 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 number of equal parts. Size is the size of the split ball, and r is the radius of the large ball.

In a for loop, the Vector3 pos is the calculated three-dimensional coordinates. I don't know how this algorithm works. I hope to explain it to you if I have a good math.

More algorithms for splitting points on the sphere can be searched on Google. Keywords:Distributed points on sphere

After finding the coordinates of each vertex through the algorithm, you can create a ball using the following code:

GameObject text = (GameObject)Instantiate (textObject, pos, Quaternion.identity);

TextObject is a small ball preset we made earlier, and pos is the coordinate of the small ball just obtained. The following figure shows how to create all the balls in a loop:

5. Set the text and color of the ball.

The above created GameObject named text is our ball. Next we will set the father, color, size, central text, and details for each ball.

// Set the big ball as the father of the small ball (put the small ball on the big ball) text. transform. parent = gameObject. transform; // obtain the TextMesh component TextMesh tm = (TextMesh) text of the ball. getComponent <TextMesh> (); // sets the text tm. text = city. getName (); // sets the color of tm. color = city. getWeatherColor (); // set the text size. transform. localScale = city. getSize (); // cyclically obtain the child of the ball (that is, the GameObject added in the ball, where only one detailed information is displayed) foreach (Transform child in text. transform) {TextMesh tm2 = (TextMesh) child. getComponent <TextMesh> (); tm2.text = city. getTempture (); tm2.color = city. getWeatherColor ();}

6. Set the orientation, transparency, and color of the ball.

Because the entire ball is constantly rotating, the orientation, transparency, and color of the ball on the ball will not stop changing. Therefore, you need to adjust the attributes of the ball in real time.

In the update () function:

// Traverse the ball in the big ball and set the orientation, transparency, and color foreach (Transform child in gameObject. transform) {// The ball always faces the camera child. lookAt (new Vector3 (cameraTarget. position. x, cameraTarget. position. y,-cameraTarget. position. z); // sets the transparency of the ball by distance, resulting in a more transparent 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 color of the ball and its sub-gameobject child. renderer. 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 ball rotation:

Above we have basically set up the big ball and the ball on it (now they are a whole ).

Next we need to let them rotate, then we need to add a collision tool for the big ball so that we can click it and rotate it.

Component-Physics-Sphere Collider

The following code allows you to rotate the gesture or mouse (if you rotate the mouse quickly, it will gradually slow down to the final stop)

Initialization:

// Drag/private bool onDrag = false; // rotation speed // private float speed = 3f; // damping speed // private float tempSpeed; // increment when the mouse moves horizontally // private float axisX; // increment when the mouse moves vertically // private float axisY; // sliding distance (Mouse) private float cXY;

Override the mouse and drag function:

// The distance between the mouse movement and void OnMouseDown () {// receives the mouse down event // axisX = 0f; axisY = 0f;} // The void OnMouseDrag () operation when the mouse is dragged () {onDrag = true; axisX =-Input. getAxis ("Mouse X"); axisY = Input. getAxis ("Mouse Y"); cXY = Mathf. sqrt (axisX * axisX + axisY * axisY); // calculates the length of the mouse movement. // if (cXY = 0f) {cXY = 1f ;}}

Calculation damping (to achieve the effect of the slow conversion mentioned above)

// Calculate the damping speed float Rigid () {if (onDrag) {tempSpeed = speed;} else {if (tempSpeed> 0) {// by dividing by the length of the mouse, the longer the drag, the slower the speed. if (cXY! = 0) {tempSpeed-= speed * 2 * Time. deltaTime/cXY ;}} else {tempSpeed = 0 ;}} return tempSpeed ;}

Finally, Judge in the Update function:

// Rotate the gameObject based on the calculated damping and the offset of X and Y axes. transform. rotate (new Vector3 (axisY, axisX, 0) * Rigid (), Space. world); // if the mouse leaves the screen, it is marked as if (! Input. GetMouseButton (0) {onDrag = false ;}

Conclusion:

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

GitHubAddress:Https://github.com/a396901990/3D_Sphere

I have prepared four articles to introduce this project:

1. Create a rotated 3D ball"

2. obtain real-time weather information from the network through the weather service and dynamically generate a "3D ball"

3. Android voice service and Unity message delivery

4. Combination of Unity3D and Android

Today is the first article. I will update the remaining articles as soon as possible...
PS: Unity3D: I only want some things that are very basic at the beginning, and there may be many mistakes. I hope you can correct them more.