Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
999964a3
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,发现更多精彩内容 >>
提交
999964a3
编写于
11月 30, 2011
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'remotes/grorg/extruded-object-materials' into dev
上级
370d20b4
5965061c
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
227 addition
and
10 deletion
+227
-10
examples/webgl_extrude_material.html
examples/webgl_extrude_material.html
+217
-0
src/extras/geometries/ExtrudeGeometry.js
src/extras/geometries/ExtrudeGeometry.js
+10
-10
未找到文件。
examples/webgl_extrude_material.html
0 → 100644
浏览文件 @
999964a3
<!doctype html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - geometry - extrusion materials
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
font-family
:
Monospace
;
background-color
:
#f0f0f0
;
margin
:
0px
;
overflow
:
hidden
;
}
</style>
</head>
<body>
<canvas
id=
"debug"
style=
"position:absolute; left:100px"
></canvas>
<script
src=
"../build/Three.js"
></script>
<script
src=
"js/RequestAnimationFrame.js"
></script>
<script
src=
"js/Stats.js"
></script>
<script>
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
text
,
plane
;
var
targetRotation
=
0
;
var
targetRotationOnMouseDown
=
0
;
var
mouseX
=
0
;
var
mouseXOnMouseDown
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
init
();
animate
();
function
loadTexture
(
path
)
{
var
image
=
new
Image
();
image
.
onload
=
function
()
{
texture
.
needsUpdate
=
true
;
};
image
.
src
=
path
;
var
texture
=
new
THREE
.
Texture
(
image
,
new
THREE
.
UVMapping
(),
THREE
.
ClampToEdgeWrapping
,
THREE
.
ClampToEdgeWrapping
,
THREE
.
NearestFilter
,
THREE
.
LinearMipMapLinearFilter
);
return
new
THREE
.
MeshBasicMaterial
(
{
map
:
texture
}
);
}
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
var
grass
=
loadTexture
(
'
textures/minecraft/grass.png
'
);
var
info
=
document
.
createElement
(
'
div
'
);
info
.
style
.
position
=
'
absolute
'
;
info
.
style
.
top
=
'
10px
'
;
info
.
style
.
width
=
'
100%
'
;
info
.
style
.
textAlign
=
'
center
'
;
info
.
innerHTML
=
'
Procedurally generated 3D shapes with different materials on extrusions<br/>Drag to spin
'
;
container
.
appendChild
(
info
);
camera
=
new
THREE
.
PerspectiveCamera
(
50
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
y
=
150
;
camera
.
position
.
z
=
500
;
scene
=
new
THREE
.
Scene
();
scene
.
add
(
camera
);
parent
=
new
THREE
.
Object3D
();
parent
.
position
.
y
=
150
;
scene
.
add
(
parent
);
var
extrudeSettings
=
{
amount
:
20
,
bevelEnabled
:
true
,
bevelSegments
:
2
,
steps
:
2
,
material
:
0
,
extrudeMaterial
:
1
};
var
colorMaterials
=
[
new
THREE
.
MeshBasicMaterial
({
color
:
0x006ed5
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0x6ed500
})
];
var
imageAndColorMaterials
=
[
grass
,
new
THREE
.
MeshBasicMaterial
({
color
:
0x6ed500
})
];
var
pillShape1
=
new
THREE
.
Shape
();
pillShape1
.
moveTo
(
30
,
10
);
pillShape1
.
lineTo
(
100
,
10
);
pillShape1
.
quadraticCurveTo
(
120
,
20
,
100
,
30
);
pillShape1
.
lineTo
(
30
,
30
);
pillShape1
.
quadraticCurveTo
(
10
,
20
,
30
,
10
);
var
pillGeometry1
=
pillShape1
.
extrude
(
extrudeSettings
);
pillGeometry1
.
materials
=
colorMaterials
;
var
pillMesh1
=
new
THREE
.
Mesh
(
pillGeometry1
,
new
THREE
.
MeshFaceMaterial
()
);
parent
.
add
(
pillMesh1
);
var
pillShape2
=
new
THREE
.
Shape
();
pillShape2
.
moveTo
(
30
,
80
);
pillShape2
.
lineTo
(
100
,
80
);
pillShape2
.
quadraticCurveTo
(
120
,
90
,
100
,
100
);
pillShape2
.
lineTo
(
30
,
100
);
pillShape2
.
quadraticCurveTo
(
10
,
90
,
30
,
80
);
var
pillGeometry2
=
pillShape2
.
extrude
(
extrudeSettings
);
pillGeometry2
.
materials
=
imageAndColorMaterials
;
var
pillMesh2
=
new
THREE
.
Mesh
(
pillGeometry2
,
new
THREE
.
MeshFaceMaterial
()
);
parent
.
add
(
pillMesh2
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
container
.
appendChild
(
stats
.
domElement
);
document
.
addEventListener
(
'
mousedown
'
,
onDocumentMouseDown
,
false
);
document
.
addEventListener
(
'
touchstart
'
,
onDocumentTouchStart
,
false
);
document
.
addEventListener
(
'
touchmove
'
,
onDocumentTouchMove
,
false
);
}
//
function
onDocumentMouseDown
(
event
)
{
event
.
preventDefault
();
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
document
.
addEventListener
(
'
mouseup
'
,
onDocumentMouseUp
,
false
);
document
.
addEventListener
(
'
mouseout
'
,
onDocumentMouseOut
,
false
);
mouseXOnMouseDown
=
event
.
clientX
-
windowHalfX
;
targetRotationOnMouseDown
=
targetRotation
;
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
event
.
clientX
-
windowHalfX
;
targetRotation
=
targetRotationOnMouseDown
+
(
mouseX
-
mouseXOnMouseDown
)
*
0.02
;
}
function
onDocumentMouseUp
(
event
)
{
document
.
removeEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
document
.
removeEventListener
(
'
mouseup
'
,
onDocumentMouseUp
,
false
);
document
.
removeEventListener
(
'
mouseout
'
,
onDocumentMouseOut
,
false
);
}
function
onDocumentMouseOut
(
event
)
{
document
.
removeEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
document
.
removeEventListener
(
'
mouseup
'
,
onDocumentMouseUp
,
false
);
document
.
removeEventListener
(
'
mouseout
'
,
onDocumentMouseOut
,
false
);
}
function
onDocumentTouchStart
(
event
)
{
if
(
event
.
touches
.
length
==
1
)
{
event
.
preventDefault
();
mouseXOnMouseDown
=
event
.
touches
[
0
].
pageX
-
windowHalfX
;
targetRotationOnMouseDown
=
targetRotation
;
}
}
function
onDocumentTouchMove
(
event
)
{
if
(
event
.
touches
.
length
==
1
)
{
event
.
preventDefault
();
mouseX
=
event
.
touches
[
0
].
pageX
-
windowHalfX
;
targetRotation
=
targetRotationOnMouseDown
+
(
mouseX
-
mouseXOnMouseDown
)
*
0.05
;
}
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
function
render
()
{
parent
.
rotation
.
y
+=
(
targetRotation
-
parent
.
rotation
.
y
)
*
0.05
;
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
src/extras/geometries/ExtrudeGeometry.js
浏览文件 @
999964a3
...
...
@@ -22,8 +22,8 @@
* extrudePath: <THREE.CurvePath> // path to extrude shape along
* bendPath: <THREE.CurvePath> // path to bend the geometry around
*
* material: <
THREE.Material> // material
for front and back faces
* extrudeMaterial: <
THREE.Material> // material
for extrusion and beveled faces
* material: <
int> // material index
for front and back faces
* extrudeMaterial: <
int> // material index
for extrusion and beveled faces
*
* }
**/
...
...
@@ -621,7 +621,7 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
f4
(
a
,
b
,
c
,
d
);
if
(
extrudeMaterial
)
{
if
(
extrudeMaterial
!==
undefined
)
{
var
v1
=
s
/
sl
;
var
v2
=
(
s
+
1
)
/
sl
;
...
...
@@ -664,21 +664,21 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
scope
.
faces
.
push
(
new
THREE
.
Face3
(
a
,
b
,
c
,
null
,
null
,
material
)
);
//normal, color, materials
if
(
material
)
{
if
(
material
!==
undefined
)
{
var
mx
=
shapebb
.
minX
,
my
=
shapebb
.
minY
;
var
uy
=
shapebb
.
maxY
;
// - shapebb.minY;
var
ux
=
shapebb
.
maxX
;
// - shapebb.minX;
var
ax
=
scope
.
vertices
[
a
].
position
.
x
,
ay
=
scope
.
vertices
[
a
].
position
.
y
,
var
ax
=
scope
.
vertices
[
a
].
position
.
x
-
mx
,
ay
=
scope
.
vertices
[
a
].
position
.
y
-
my
,
bx
=
scope
.
vertices
[
b
].
position
.
x
,
by
=
scope
.
vertices
[
b
].
position
.
y
,
bx
=
scope
.
vertices
[
b
].
position
.
x
-
mx
,
by
=
scope
.
vertices
[
b
].
position
.
y
-
my
,
cx
=
scope
.
vertices
[
c
].
position
.
x
,
cy
=
scope
.
vertices
[
c
].
position
.
y
;
cx
=
scope
.
vertices
[
c
].
position
.
x
-
mx
,
cy
=
scope
.
vertices
[
c
].
position
.
y
-
my
;
scope
.
faceVertexUvs
[
0
].
push
(
[
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录