Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize Tesla car with JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize Tesla's car with JavaScript".

There is a very detailed guide on ViroReact's website:

Step by step, you can finally see a hard-coded Hello World string and some 3D objects in the real scene through your phone's camera.

This Hello World-level source code can be downloaded from the ViroReact official website, so this article still focuses on the implementation principle of demo done by Leo.

Open the project project of Leo and find package.json. The project name is ViroSample, which declares the dependency on React-Native and React-viro.

The beauty of the combination of React-Native and ViroReact lies in the cross-platform feature of "write once, run everywhere". Write JavaScript code once and run it as a native application in both iOS and Android operating systems.

Take Android as an example, after executing the command line react-native start plus react-native run-android, you can find part of the source code of the native application generated for the Android platform in the android folder. The two most important application boot files, one is MainActivity.java, which returns the project name of the AR application by callback function:

The getJSMainModuleName of MainApplication.java indicates the name of the JavaScript entry module by callback function:

Since this article is not an explanation of React-Native, it does not elaborate on the startup principle of React-Native applications on the Android platform, and interested friends can search on their own. The React-Native biosphere is very active, and there are numerous articles on similar principles.

For augmented reality applications developed by React-Native + ViroReact, the typical implementation routine Jerry can be summed up in three steps: Match-Replace-Augment

(1) Match-matching

Because augmented reality applications overlay code-generated virtual objects into real scenes, application developers need to help ViroReact find an attachment plane in the real scene, so that ViroReact can map the attachment plane to the phone's two-dimensional screen, and then ViroReact can draw virtual objects on the two-dimensional screen.

ViroReact provides a tag ViroARImageMarker, which, as the name implies, allows application developers to define a "Marker" (identity, tag).

In programming terms, this tag defines a place holder that is associated with an image specified by the application developer through the target attribute. When users use augmented reality applications to scan images that match the images specified by ViroARImageMarker in the real world through the camera, ViroReact will replace the graphics specified by Marker with 3D models prepared in advance by application developers. The match-and-replace process is done automatically by ViroReact, and the application developer only needs to provide the image pointed to by Marker and the 3D model to be replaced. AR applications implemented in this way are also called Marker based AR applications (and, of course, AR applications that are not implemented with Marker).

Go back to the demo of Leo. From the figure above, you can see that the Marker content that target points to is an object named logo, which is created by API ViroARTrackingTargets.createTargets. The input parameter is the relative path of the image in the AR project:

The picture is shown below. This is why when Leo demonstrates the app, the first step is to open the image on the computer and then scan it with the phone's camera.

(2) Replace-substitution

After ViroReact matches the real-world graphics with the Image Marker of the AR application, it is automatically replaced with a 3D object and rendered to the location of the Marker.

The 3D object to be replaced is defined by the label Viro3DObject, and there are three important attributes that need to be specified:

Source and resources:3D model files are generally generated by professional 3D software. Windows10's native Paint 3D software can open model files that end with .obj:

It is easy to observe that the surface of the Tesla car seen in Paint 3D has no luster, while Tesla in the Leo video can change the appearance of different colors by adding different texture (texture) to the 3D model.

Through ViroMaterials.createMaterials, we pass in different texture parameters to generate different Material objects, and finally assign them to the materials property of the Viro3DObject above, which completes the declaration of the 3D object to be replaced.

By using React programming to dynamically modify the value of the Viro3DObject materials property, we can dynamically modify the color of Tesla's car body observed in the camera.

Of course, the graphics files corresponding to these different texture also need to be produced by professionals:

(3) Augment enhancement

This step is familiar to programmers who have never been in touch with AR application development: the tag Viro3DObject supports various event response functions, such as the onClick callback function triggered after a click:

We register our own _ toggleButtons function on the onClick event, and when Tesla's model is clicked, we can pop up the color selection menu in the demo video, allowing the user to specify a new body color.

Because the React model field bound by the materials property of Viro3DObject is this.state.texture, after the user selects a new color, the user can call the this.setState method of React to set the texture property to the selected color to realize the dynamic refresh of the body color.

At this point, I believe you have a deeper understanding of "how to achieve Tesla car in JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.