Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
4313ed37
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4313ed37
编写于
4月 20, 2012
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'zz85/master' into dev
上级
08a37d34
660fa8cc
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
219 addition
and
83 deletion
+219
-83
examples/js/UVsUtils.js
examples/js/UVsUtils.js
+92
-0
examples/webgl_geometries2.html
examples/webgl_geometries2.html
+51
-36
src/core/Geometry.js
src/core/Geometry.js
+8
-3
src/extras/geometries/ParametricGeometries.js
src/extras/geometries/ParametricGeometries.js
+30
-19
src/extras/geometries/ParametricGeometry.js
src/extras/geometries/ParametricGeometry.js
+38
-25
未找到文件。
examples/js/UVsUtils.js
0 → 100644
浏览文件 @
4313ed37
/*
* @author https://github.com/zz85 | @blurspline
*
* tool for "unwrapping" and debugging three.js
* geometries UV mapping
*
* Sample usage:
* document.body.appendChild(
* THREE.UVsDebug(
* new THREE.SphereGeometry(10,10,10,10));
*
*/
THREE
.
UVsDebug
=
function
(
geometry
)
{
var
verts
=
geometry
.
vertices
,
faces
=
geometry
.
faces
,
uvs
=
geometry
.
faceVertexUvs
[
0
];
console
.
log
(
'
debugging geometry
'
,
geometry
);
var
canvas
=
document
.
createElement
(
'
canvas
'
);
var
width
=
1024
;
var
height
=
1024
;
canvas
.
width
=
width
;
canvas
.
height
=
height
;
var
ctx
=
canvas
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
1
;
ctx
.
strokeStyle
=
'
rgba(0,0,0,0.8)
'
;
// paint background white
ctx
.
fillStyle
=
'
rgba(255,255,255, 1.0)
'
;
ctx
.
fillRect
(
0
,
0
,
width
,
height
);
var
abc
=
'
abcd
'
;
var
uv
,
u
,
ax
,
ay
;
var
i
,
il
,
j
,
jl
;
var
a
=
new
THREE
.
Vector2
();
var
b
=
new
THREE
.
Vector2
();
for
(
i
=
0
,
il
=
uvs
.
length
;
i
<
il
;
i
++
)
{
uv
=
uvs
[
i
];
// draw lines
ctx
.
beginPath
();
a
.
set
(
0
,
0
);
for
(
j
=
0
,
jl
=
uv
.
length
;
j
<
jl
;
j
++
)
{
u
=
uv
[
j
];
a
.
x
+=
u
.
u
;
a
.
y
+=
u
.
v
;
if
(
j
==
0
)
{
ctx
.
moveTo
(
u
.
u
*
width
,
u
.
v
*
height
);
}
else
{
ctx
.
lineTo
(
u
.
u
*
width
,
u
.
v
*
height
);
}
}
ctx
.
closePath
();
ctx
.
stroke
();
a
.
divideScalar
(
jl
);
// label the face number
ctx
.
font
=
"
12pt Arial bold
"
;
ctx
.
fillStyle
=
'
rgba(0,0,0,0.8)
'
;
ctx
.
fillText
(
i
,
a
.
x
*
width
,
a
.
y
*
height
);
ctx
.
font
=
"
8pt Arial bold
"
;
ctx
.
fillStyle
=
'
rgba(30,30,0,0.8)
'
;
// label uv edge orders
for
(
j
=
0
,
jl
=
uv
.
length
;
j
<
jl
;
j
++
)
{
u
=
uv
[
j
];
b
.
set
(
u
.
u
,
u
.
v
).
subSelf
(
a
).
divideScalar
(
4
);
b
.
x
=
u
.
u
-
b
.
x
;
b
.
y
=
u
.
v
-
b
.
y
;
ctx
.
fillText
(
abc
[
j
]
+
'
:
'
+
faces
[
i
][
abc
[
j
]],
b
.
x
*
width
,
b
.
y
*
height
);
}
}
return
canvas
;
}
\ No newline at end of file
examples/webgl_geometries2.html
浏览文件 @
4313ed37
...
...
@@ -9,7 +9,7 @@
font-family
:
Monospace
;
background-color
:
#000
;
margin
:
0px
;
overflow
:
hidden
;
/*overflow: hidden;*/
}
</style>
</head>
...
...
@@ -19,9 +19,10 @@
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/Stats.js"
></script>
<script
src=
"../src/core/Geometry.js"
></script>
<script
src=
"js/CurveExtras.js"
></script>
<script
src=
"js/UVsUtils.js"
></script>
<script
src=
"../src/extras/geometries/ParametricGeometry.js"
></script>
<script
src=
"../src/extras/geometries/ParametricGeometries.js"
></script>
<script>
...
...
@@ -68,13 +69,13 @@
var
q
=
3
;
var
radius
=
150
,
tube
=
10
,
segmentsR
=
50
,
segmentsT
=
20
;
var
GrannyKnot
=
new
THREE
.
Curves
.
GrannyKnot
();
var
torus
=
new
THREE
.
TorusKnotGeometry
(
radius
,
tube
,
segmentsR
,
segmentsT
,
p
,
q
,
heightScale
);
var
torus2
=
new
THREE
.
TorusKnotGeometry2
(
radius
,
tube
,
segmentsR
,
segmentsT
,
p
,
q
,
heightScale
);
var
sphere
=
new
THREE
.
SphereGeometry
(
75
,
20
,
10
);
var
sphere2
=
new
THREE
.
SphereGeometry2
(
75
,
20
,
10
);
var
tube
=
new
THREE
.
TubeGeometry
(
GrannyKnot
,
150
,
2
,
8
,
true
,
false
);
var
tube2
=
new
THREE
.
TubeGeometry2
(
GrannyKnot
,
150
,
2
,
8
,
true
,
false
);
//
var GrannyKnot = new THREE.Curves.GrannyKnot();
//
var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
//
var torus2 = new THREE.TorusKnotGeometry2( radius, tube, segmentsR, segmentsT, p , q, heightScale );
//
var sphere = new THREE.SphereGeometry( 75, 20, 10 );
//
var sphere2 = new THREE.SphereGeometry2( 75, 20, 10 );
//
var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
//
var tube2 = new THREE.TubeGeometry2(GrannyKnot, 150, 2, 8, true, false);
// var benchmarkCopies = 1000;
...
...
@@ -86,46 +87,60 @@
// scene.add( object );
// }
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
torus
,
materials
);
console
.
log
(
THREE
.
ParametricGeometries
);
var
geo
=
new
THREE
.
ParametricGeometry
(
20
,
20
,
THREE
.
ParametricGeometries
.
klein
);
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
geo
,
materials
);
object
.
children
[
0
].
doubleSided
=
true
;
object
.
position
.
set
(
0
,
0
,
0
);
object
.
scale
.
multiplyScalar
(
10
);
scene
.
add
(
object
);
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
torus2
,
materials
);
object
.
position
.
set
(
0
,
100
,
0
);
scene
.
add
(
object
);
// var geo = new THREE.ParametricGeometry(10, 10, THREE.ParametricGeometries.plane(200, 200));
THREE
.
UVsDebug
(
geo
);
document
.
body
.
appendChild
(
THREE
.
UVsDebug
(
geo
));
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
geo
,
materials
);
object
.
children
[
0
].
doubleSided
=
true
;
// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
sphere
,
materials
);
object
.
position
.
set
(
500
,
0
,
0
);
scene
.
add
(
object
);
// object = THREE.SceneUtils.createMultiMaterialObject( torus2
, materials );
// object.position.set( 0, 10
0, 0 );
//
scene.add( object );
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
sphere2
,
materials
);
object
.
position
.
set
(
200
,
0
,
0
);
scene
.
add
(
object
);
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
tube
,
materials
);
object
.
position
.
set
(
0
,
0
,
0
);
scene
.
add
(
object
);
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
tube2
,
materials
);
object
.
position
.
set
(
100
,
0
,
0
);
scene
.
add
(
object
);
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
new
THREE
.
ParametricGeometry
(
10
,
10
,
klein
)
,
materials
);
object
.
position
.
set
(
1
00
,
0
,
0
);
scene
.
add
(
object
);
// object = THREE.SceneUtils.createMultiMaterialObject( sphere
, materials );
// object.position.set( 5
00, 0, 0 );
//
scene.add( object );
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
new
THREE
.
PlaneGeometry
(
400
,
400
,
4
,
4
),
materials
);
// object.children[ 0 ].doubleSided = true;
object
.
position
.
set
(
-
200
,
100
,
0
);
scene
.
add
(
object
);
// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
// object.position.set( 200, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );
object
=
THREE
.
SceneUtils
.
createMultiMaterialObject
(
new
THREE
.
PlaneGeometry2
(
400
,
400
,
4
,
4
),
materials
);
// object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
// // object.children[ 0 ].doubleSided = true;
// object.position.set( -200, 100, 0 );
// scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
// object.children[ 0 ].doubleSided = true;
object
.
position
.
set
(
-
200
,
100
,
0
);
scene
.
add
(
object
);
//
object.position.set( -200, 100, 0 );
//
scene.add( object );
object
=
new
THREE
.
AxisHelper
();
object
.
position
.
set
(
200
,
0
,
-
200
);
...
...
src/core/Geometry.js
浏览文件 @
4313ed37
...
...
@@ -574,7 +574,7 @@ THREE.Geometry.prototype = {
var
precisionPoints
=
4
;
// number of decimal points, eg. 4 for epsilon of 0.0001
var
precision
=
Math
.
pow
(
10
,
precisionPoints
);
var
i
,
il
,
face
;
var
abcd
=
'
abcd
'
,
o
,
k
;
var
abcd
=
'
abcd
'
,
o
,
k
,
j
,
jl
,
u
;
for
(
i
=
0
,
il
=
this
.
vertices
.
length
;
i
<
il
;
i
++
)
{
...
...
@@ -623,8 +623,12 @@ THREE.Geometry.prototype = {
// console.log('faces', face.a, face.b, face.c, face.d, 'dup at', k);
o
.
splice
(
k
,
1
);
this
.
faces
[
i
]
=
new
THREE
.
Face3
(
o
[
0
],
o
[
1
],
o
[
2
]);
this
.
faceVertexUvs
[
0
][
i
].
splice
(
k
,
1
);
for
(
j
=
0
,
jl
=
this
.
faceVertexUvs
.
length
;
j
<
jl
;
j
++
)
{
u
=
this
.
faceVertexUvs
[
j
][
i
];
if
(
u
)
u
.
splice
(
k
,
1
);
}
break
;
}
}
...
...
@@ -634,8 +638,9 @@ THREE.Geometry.prototype = {
}
// Use unique set of vertices
var
diff
=
this
.
vertices
.
length
-
unique
.
length
;
this
.
vertices
=
unique
;
return
diff
;
}
...
...
src/extras/geometries/ParametricGeometries.js
浏览文件 @
4313ed37
...
...
@@ -121,29 +121,41 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
THREE
.
TorusKnotGeometry2
.
prototype
=
new
THREE
.
Geometry
();
THREE
.
TorusKnotGeometry2
.
prototype
.
constructor
=
THREE
.
TorusKnotGeometry2
;
var
sin
=
Math
.
sin
,
cos
=
Math
.
cos
,
pi
=
Math
.
PI
;
THREE
.
ParametricGeometries
=
{
klein
:
function
(
v
,
u
)
{
u
*=
pi
;
v
*=
2
*
pi
;
u
=
u
*
2
;
var
x
,
y
,
z
;
if
(
u
<
pi
)
{
x
=
3
*
cos
(
u
)
*
(
1
+
sin
(
u
))
+
(
2
*
(
1
-
cos
(
u
)
/
2
))
*
cos
(
u
)
*
cos
(
v
);
z
=
-
8
*
sin
(
u
)
-
2
*
(
1
-
cos
(
u
)
/
2
)
*
sin
(
u
)
*
cos
(
v
);
}
else
{
x
=
3
*
cos
(
u
)
*
(
1
+
sin
(
u
))
+
(
2
*
(
1
-
cos
(
u
)
/
2
))
*
cos
(
v
+
pi
);
z
=
-
8
*
sin
(
u
);
}
y
=
-
2
*
(
1
-
cos
(
u
)
/
2
)
*
sin
(
v
);
return
new
THREE
.
Vector3
(
x
,
y
,
z
);
},
plane
:
function
(
width
,
height
)
{
return
function
(
u
,
v
)
{
var
x
=
u
*
width
;
var
y
=
0
;
var
z
=
v
*
height
;
function
klein
(
u
,
v
)
{
u
*=
pi
;
v
*=
2
*
pi
;
console
.
log
(
x
,
y
,
z
);
u
=
u
*
2
;
var
x
,
y
,
z
;
if
(
u
<
pi
)
{
x
=
3
*
cos
(
u
)
*
(
1
+
sin
(
u
))
+
(
2
*
(
1
-
cos
(
u
)
/
2
))
*
cos
(
u
)
*
cos
(
v
);
z
=
-
8
*
sin
(
u
)
-
2
*
(
1
-
cos
(
u
)
/
2
)
*
sin
(
u
)
*
cos
(
v
);
}
else
{
x
=
3
*
cos
(
u
)
*
(
1
+
sin
(
u
))
+
(
2
*
(
1
-
cos
(
u
)
/
2
))
*
cos
(
v
+
pi
);
z
=
-
8
*
sin
(
u
);
return
new
THREE
.
Vector3
(
x
,
y
,
z
);
};
}
y
=
-
2
*
(
1
-
cos
(
u
)
/
2
)
*
sin
(
v
);
return
new
THREE
.
Vector3
(
x
,
y
,
z
);
}
};
THREE
.
SphereGeometry2
=
function
(
size
,
x
,
y
)
{
...
...
@@ -171,7 +183,6 @@ THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {
function
plane
(
u
,
v
)
{
console
.
log
(
'
u, v
'
,
u
,
v
);
var
x
=
u
*
width
;
var
y
=
0
;
var
z
=
v
*
depth
;
...
...
src/extras/geometries/ParametricGeometry.js
浏览文件 @
4313ed37
...
...
@@ -12,47 +12,60 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
var
faces
=
this
.
faces
;
var
uvs
=
this
.
faceVertexUvs
[
0
];
var
i
,
il
,
theta
,
j
,
phi
,
p
;
var
face3
=
true
;
for
(
i
=
0
;
i
<=
slices
;
i
++
)
{
var
i
,
il
,
j
,
p
;
var
u
,
v
;
theta
=
i
/
slices
;
var
stackCount
=
stacks
+
1
;
var
sliceCount
=
slices
+
1
;
for
(
i
=
0
;
i
<=
stacks
;
i
++
)
{
for
(
j
=
0
;
j
<
stacks
;
j
++
)
{
v
=
i
/
stacks
;
phi
=
j
/
stacks
;
for
(
j
=
0
;
j
<=
slices
;
j
++
)
{
p
=
func
(
theta
,
phi
);
u
=
j
/
slices
;
p
=
func
(
u
,
v
);
verts
.
push
(
p
);
}
}
var
v
=
0
,
next
;
var
a
,
b
,
c
,
d
;
var
uva
,
uvb
,
uvc
,
uvd
;
for
(
i
=
0
;
i
<
stacks
;
i
++
)
{
for
(
j
=
0
;
j
<
slices
;
j
++
)
{
a
=
i
*
stackCount
+
j
;
b
=
i
*
stackCount
+
j
+
1
;
c
=
(
i
+
1
)
*
stackCount
+
j
;
d
=
(
i
+
1
)
*
stackCount
+
j
+
1
;
uva
=
new
THREE
.
UV
(
i
/
slices
,
j
/
stacks
);
uvb
=
new
THREE
.
UV
(
i
/
slices
,
(
j
+
1
)
/
stacks
);
uvc
=
new
THREE
.
UV
(
(
i
+
1
)
/
slices
,
j
/
stacks
);
uvd
=
new
THREE
.
UV
(
(
i
+
1
)
/
slices
,
(
j
+
1
)
/
stacks
);
faces
.
push
(
new
THREE
.
Face3
(
a
,
b
,
c
)
);
faces
.
push
(
new
THREE
.
Face3
(
b
,
d
,
c
)
);
// Some UV / Face orientation work needs to be done here...
for
(
i
=
0
;
i
<
slices
;
i
++
)
{
for
(
j
=
0
;
j
<
stacks
;
j
++
)
{
next
=
(
j
+
1
)
%
stacks
;
faces
.
push
(
new
THREE
.
Face3
(
v
+
j
,
v
+
next
,
v
+
j
+
stacks
)
);
faces
.
push
(
new
THREE
.
Face3
(
v
+
next
,
v
+
next
+
stacks
,
v
+
j
+
stacks
)
);
uvs
.
push
(
[
new
THREE
.
UV
(
i
/
slices
,
j
/
stacks
),
new
THREE
.
UV
(
i
/
slices
,
(
j
+
1
)
/
stacks
),
new
THREE
.
UV
(
(
i
+
1
)
/
slices
,
j
/
stacks
)
]
);
uvs
.
push
(
[
new
THREE
.
UV
(
i
/
slices
,
(
j
+
1
)
/
stacks
),
new
THREE
.
UV
(
(
i
+
1
)
/
slices
,
(
j
+
1
)
/
stacks
),
new
THREE
.
UV
(
(
i
+
1
)
/
slices
,
j
/
stacks
)
]
);
uvs
.
push
(
[
uva
,
uvb
,
uvc
]
);
uvs
.
push
(
[
uvb
,
uvd
,
uvc
]
);
}
v
+=
stacks
;
}
console
.
log
(
this
);
// magic bullet
var
diff
=
this
.
mergeVertices
();
console
.
log
(
'
removed
'
,
diff
,
'
vertices by merging
'
)
this
.
computeCentroids
();
this
.
computeFaceNormals
();
this
.
computeVertexNormals
();
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录