-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathmisc_uv_tests.html
187 lines (173 loc) · 8.81 KB
/
misc_uv_tests.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - uv mapping tests</title>
<meta charset=utf-8 />
<!--
如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../build/three.js"></script>
<!--
通过给定的几何形状，在Canvas中画出其UV纹理贴图
-->
<script src="js/utils/UVsDebug.js"></script>
<script>
/*
This is to help debug UVs problems in geometry, as well as allow a new user to visualize what UVs are about.
该函数可以帮助调试几何UV纹理贴图的问题，同时也允许用户可以观察到UV纹理贴图是什么样子的
*/
function test(description, name, geometry) {
var d = document.createElement( 'div' );
d.innerHTML = '<br><br>' + description + '<br>' + name + '<br>';
d.appendChild( THREE.UVsDebug( geometry ) );
document.body.appendChild( d );
}
/*
矩形(或平面)
function PlaneGeometry( width, height, widthSegments, heightSegments ) {……}
width: 宽度
height: 高度
widthSegments: 宽度段数，指定矩形的宽度应该划分为几份
heightSegments: 高度段数，指定矩形的高度应该划分为几份
*/
test('矩形', 'new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
/*
矩形(或平面)
这个类是另一种创建几何体对象的方式,它将所有的数据包括顶点位置,法线,面,颜色,uv和其它的自定义属性存在缓冲区,
这样可以减少GPU的负荷,BufferGeometry同样也比Geometry对象复杂,增加了使用的难度,这里的属性都是存放在数组中,
比如顶点位置不是Vector3对象,颜色也不是color对象,而是数组.需要访问这些属性,需要从属性缓冲区中读原始数据.
其纹理图与 PlaneGeometry 完全一样
function PlaneBufferGeometry( width, height, widthSegments, heightSegments ) {……}
width: 宽度
height: 高度
widthSegments: 宽度段数，指定矩形的宽度应该划分为几份
heightSegments: 高度段数，指定矩形的高度应该划分为几份
*/
test('矩形', 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ));
/*
圆
function CircleGeometry( radius, segments, thetaStart, thetaLength ) {……}
radius: 半径
segments: 创建圆所用的三角形面的数量，至少3个，默认为8。值越大，创建出的圆越光滑
thetaStart: 起始角，默认为0。3点钟方向，逆时针为正
thetaLength: 角度，默认为 2*Math.PI
*/
test('圆', 'new THREE.CircleGeometry( 75, 12 )', new THREE.CircleGeometry( 75, 12));
/*
圆环
RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)
innerRadius: 内圆半径，默认为0。但是当设置为0时，并不能正常工作。
outerRadius: 外圆半径，默认为50
thetaSegments: 圆环的分片数，最小3个，默认为8。值越大，创建出的圆越光滑
phiSegments: 圆环管道部分的分片数，最小为1，默认为8。
thetaStart: 起始角，默认为0。3点钟方向，逆时针为正
thetaLength: 角度，默认为 2*Math.PI
*/
test('圆环', 'new THREE.RingGeometry( 25, 75, 12 )', new THREE.RingGeometry( 25, 75, 12,3));
/*
球体
function SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) {……}
radius: 半径
widthSegments: 水平方向上的分段数，段数越多，球体表面越光滑，默认是8。最小是3
heightSegments: 垂直方向上的分段数，段数越多，球体表面越光滑，默认是6，最小是2
phiStart: 从X轴的什么地方开始绘制(X轴负方向为起始点，逆时针方向为正，即符合右手螺旋定则)
phiLength: 绘制的弧度
thetaStart: 从Y轴的什么地方开始绘制(Y轴正方向为起始点，逆时针方向为正，即符合右手螺旋定则)
thetaLength: 绘制的弧度
*/
test('球体', 'new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6));
/*
正六面体(方块或立方体，原CubeGeometry)
function BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) {……}
width: 方块的宽度，即方块沿X轴方向的长度
height: 方块的高度，即方块沿Y轴方向的长度
depth: 方块的深度，即方块沿Z轴方向的长度
widthSegments: 沿方块的X轴方向，将面分成多少份，默认为1
heightSegments: 沿方块的Y轴方向，将面分成多少份，默认为1
depthSegments: 沿放开的Z轴方向，将面分成多少份，默认为1
*/
test('方块(或立方体)', 'new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ));
/*
正4面体
function TetrahedronGeometry( radius, detail ) {……}
radius: 半径
detail: 细节层次，可以控制在视角接近物体的时候显示面数多的精细模型，而在远离物体时显示面数较少的粗略模型
*/
test('正4面体', 'new THREE.TetrahedronGeometry( 30, 1 )', new THREE.TetrahedronGeometry( 30, 1 ));
/*
正8面体
function OctahedronGeometry( radius, detail ) {……}
radius: 半径
detail: 细节层次，可以控制在视角接近物体的时候显示面数多的精细模型，而在远离物体时显示面数较少的粗略模型
*/
test('正8面体', 'new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
/*
正20面体(有20个相同三角形面的多面体)
function IcosahedronGeometry( radius, detail ) {……}
radius: 半径
detail: 细节层次，可以控制在视角接近物体的时候显示面数多的精细模型，而在远离物体时显示面数较少的粗略模型
*/
test('正20面体', 'new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
/*
圆柱体
function CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength ) {……}
radiusTop: 顶部圆的半径
radiusBottom: 底部圆的半径
height: 圆柱体的高度
radiusSegments: 圆的分段数
heightSegments: 高的分段数
openEnded: 圆柱两端是否开放，及是否绘制顶和底
thetaStart: 起始弧度
thetaLength: 绘制弧度
*/
test('圆柱体', 'new THREE.CylinderGeometry( 25, 75, 12, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 12, 10, 5 ));
/*
圆锥体
function ConeGeometry( radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength ) {
CylinderGeometry.call( this, 0, radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength );
……
}
*/
test('圆锥体', 'new THREE.ConeGeometry( 25, 75, 12, 10, 5 )', new THREE.ConeGeometry( 25, 75, 12, 10, 5 ));
var points = [];
for ( var i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
}
/*
通过截面顶点数组(points)创建旋转几何体
function LatheGeometry( points, segments, phiStart, phiLength ) {……}
points: 截面顶点
segments: 对圆周长的分段数
phiStart: 起始经度
phiLength: 旋转过的弧度
*/
test('通过截面顶点数组(points)创建旋转几何体', 'new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
/*
甜甜圈
function TorusGeometry( radius, tube, radialSegments, tubularSegments, arc ) {……}
radius: 圆环的半径
tube: 圆环管道的半径
radialSegments: 圆环的分段数
tubularSegments:管道圆的分段数
arc: 绘制多少弧度的圆环
*/
test('圆环', 'new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
/*
环面纽结
function TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale ) {……}
radius: 圆环的半径
tube: 圆环管道的半径
radialSegments: 圆环的分段数
tubularSegments:管道圆的分段数
p: 该结绕其轴多久旋转一次，默认为2
q: 定义该结绕其内部旋转多少次，默认为3
heightScale: 拉伸环面扭结，默认为1
*/
test('环面纽结', 'new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
</script>
</body>
</html>