- WebGL Hotshot
- Mitch Williams
- 275字
- 2021-07-16 11:43:28
Transformations – translation, rotation, and scaling
We are off to a good start. Now, let's add two or more objects. If we don't want everything sitting in the same place, we need a way to position the objects in the vast universe of 3D space. The most common way is by using transformation.
Engage thrusters
We don't alter the original 3D object, but just apply some math to each point in the 3D mesh to rotate, translate (move), and/or scale the object, as follows:
<Scene> <Transform translation="-2 -3 -3" rotation=".6 .8 0 .5"> <Shape> <Appearance> <Material diffuseColor='0.9 0.6 0.3' /> </Appearance> <Box/> </Shape> </Transform> <Transform translation="2 2.5 1" rotation="0 0 1 -.5"> <Shape> <Appearance> <Material diffuseColor='0.3 0.9 0.6' /> </Appearance> <Cone/> </Shape> </Transform> <Transform translation="-1 0 0" scale=".5 .5 .5"> <Shape> <Appearance> <Material diffuseColor='0.6 0.3 0.9' /> </Appearance> <Cylinder/> </Shape> </Transform> <Transform translation="1 0 0"> <Shape> <Appearance> <Material diffuseColor='0.6 0.3 0.9' /> </Appearance> <Cylinder/> </Shape> </Transform> </Scene>
Objective complete – mini debriefing
Each <Shape>
tag is now embedded into a <Transform>
tag. The first object, the box, has a translation of (-2, -3, -3), which moves it two units to the left, three units downwards, and three units backward from the origin. It also has a rotation of (0.6, 0.8, 0, 0.5), which will be discussed in more detail later, but the first three values represent the x, y, and z axes, respectively, and the fourth value is the angle of rotation in radians (π radians = 180 degrees). Also, note that the sum of the squares of the x, y, and z values equals 1: x2 + y2 + z2 = 1.
The second object is a cone translated two units to the right, 2.5 units upwards, and one unit forward with a rotation of 0.5 radians around the z axis (like the hands of a clock). The third and fourth objects are both cylinders with a uniform 0.5 scale on the left cylinder, which means that it's half its default size. Note that the scale does not need to be the same value for all three axes.
- Intel FPGA/CPLD設計(基礎篇)
- Getting Started with Qt 5
- The Applied AI and Natural Language Processing Workshop
- Manage Partitions with GParted How-to
- Hands-On Machine Learning with C#
- 微軟互聯網信息服務(IIS)最佳實踐 (微軟技術開發者叢書)
- Spring Cloud微服務架構實戰
- 計算機組裝維修與外設配置(高等職業院校教改示范教材·計算機系列)
- 固態存儲:原理、架構與數據安全
- SiFive 經典RISC-V FE310微控制器原理與實踐
- 龍芯自主可信計算及應用
- WebGL Hotshot
- The Artificial Intelligence Infrastructure Workshop
- 微控制器的應用
- Zabbix 4 Network Monitoring