Thingjs technology to achieve UV animation, scene development components are readily available

Time:2021-5-8

The texture pixels of UVs corresponding to the model vertices change with time. But it can’t make the object “deform”, it can only simulate the repeated background. Thingjs technology to achieve UV animation, scene development components at your fingertips!
What is UV? By changing the texture coordinates, the dynamic effect of texture animation is realized. In the 3D scene, some dynamic water surface, flowing magma, beating flames and so on are animated by operating UV. In campusbuilder, you can set animation effects according to the curve attributes of function items, and modify the flow speed, line width, map displacement, map repetition and other styles.
Download the cambuilder editor, register your account for free, and find the “function” item in the right menu bar.
Thingjs technology to achieve UV animation, scene development components are readily available

In campusbuilder, select the curve under the function item and add a curve manually. The line width and anchor point can be set manually, and an anchor point can generate a new segment.
Thingjs technology to achieve UV animation, scene development components are readily available

Select a map and brush it into the curve to generate the background picture.
Thingjs technology to achieve UV animation, scene development components are readily available

Click the curve attribute, select to open the flow animation, and use the positive and negative direction of the flow speed to set the positive and negative direction. The larger the number, the faster the speed. Cambuilder can seamlessly connect with thingjs online platform and open curve UV animation. The example code is as follows:

var app = new THING.App({ 
    //Scene address
    "url": "https://www.thingjs.com/static/models/guan"
});

app.on('load', function () {
    app.query('.RouteLine')[0].scrollUV = true;
    app.query('.RouteLine')[0].scrollSpeed = -100;
})

Thingjs technology to achieve UV animation, scene development components are readily available
Thingjs technology to achieve UV animation, scene development components are readily available

What is anchor? A fragment is made up of anchor points. Only by modifying anchor points can the shape of the fragment be changed. Note that once the anchor is deleted, the fragment will disappear at the same time. In cambuilder, click the left button to set a new anchor, which may overlap due to operation. Although it does not affect the flow animation, it will lack fluency, as shown in the figure above.

Thingjs has the most popular 3D scene development component for front-end engineers!

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]