Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
f319a721
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,发现更多精彩内容 >>
提交
f319a721
编写于
6月 05, 2011
作者:
Z
zz85
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
WIP webgl text
上级
2af725eb
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
488 addition
and
0 deletion
+488
-0
examples/webgl_geometry_text.html
examples/webgl_geometry_text.html
+488
-0
未找到文件。
examples/webgl_geometry_text.html
0 → 100644
浏览文件 @
f319a721
<!DOCTYPE HTML>
<html
lang=
"en"
>
<head>
<title>
three.js canvas/webgl - geometry - text
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
/>
<style
type=
"text/css"
>
body
{
font-family
:
Monospace
;
background-color
:
#000000
;
/*f0f0f0*/
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
10px
;
width
:
100%
;
padding
:
5px
;
text-align
:
center
;
color
:
white
;
}
</style>
</head>
<body>
<div
id=
"info"
>
Drag to spin the text
<br/>
Simple Dynamic 3D Text WebGL Example by
<a
href=
"http://www.lab4games.net/zz85/blog"
>
zz85
</a>
</div>
<!--
<script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>
-->
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<link
href=
"js/gui/gui.css"
media=
"screen"
rel=
"stylesheet"
type=
"text/css"
/>
<script
type=
"text/javascript"
src=
"js/gui/gui.min.js"
></script>
<script
type=
"text/javascript"
src=
"../src/extras/geometries/Text.js"
></script>
<!--
<script type="text/javascript" src="helvetiker-normal-normal.js"></script>
http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_serif-normal-normal.js
optimer-normal-normal.js
gentilis-normal-normal
http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/helvetiker-normal-normal.js
<script type="text/javascript" src="http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/optimer-normal-normal.js"></script>
-->
<script
type=
"text/javascript"
src=
"js/helvetiker-normal-normal.js"
></script>
<script
type=
"text/javascript"
>
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
;
var
mouseY
=
0
;
var
materials
;
init
();
animate
();
function
init
()
{
//ThreeFont.face = 'optimer';
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
Camera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
var
originalCamPos
=
new
THREE
.
Vector3
(
0
,
150
,
500
);
camera
.
position
=
originalCamPos
;
//camera.position.z = 500;
//camera.target.position.y = 150;
scene
=
new
THREE
.
Scene
();
// text
// Materials
var
materials
=
[];
for
(
var
i
=
0
;
i
<
6
;
i
++
)
{
materials
.
push
(
[
new
THREE
.
MeshBasicMaterial
(
{
color
:
Math
.
random
()
*
0xffffff
,
wireframe
:
false
}
)
]
);
}
var
generatedTexture
=
new
THREE
.
Texture
(
generateTexture
()
);
generatedTexture
.
needsUpdate
=
true
;
//var
materials
=
[];
materials
.
push
(
new
THREE
.
MeshLambertMaterial
(
{
map
:
generatedTexture
}
)
);
materials
.
push
(
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xdddddd
,
shading
:
THREE
.
FlatShading
}
)
);
materials
.
push
(
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
FlatShading
}
)
);
materials
.
push
(
new
THREE
.
MeshNormalMaterial
(
)
);
materials
.
push
(
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x665500
,
blending
:
THREE
.
AdditiveBlending
}
)
);
materials
.
push
(
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xff0000
,
blending
:
THREE
.
SubtractiveBlending
}
)
);
materials
.
push
(
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xdddddd
,
shading
:
THREE
.
SmoothShading
}
)
);
materials
.
push
(
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
SmoothShading
}
)
);
materials
.
push
(
new
THREE
.
MeshNormalMaterial
(
{
shading
:
THREE
.
SmoothShading
}
)
);
materials
.
push
(
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
,
wireframe
:
true
}
)
);
materials
.
push
(
new
THREE
.
MeshDepthMaterial
()
);
materials
.
push
(
new
THREE
.
MeshBasicMaterial
(
{
map
:
generatedTexture
}
)
);
function
generateTexture
()
{
var
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
256
;
canvas
.
height
=
256
;
var
context
=
canvas
.
getContext
(
'
2d
'
);
var
image
=
context
.
getImageData
(
0
,
0
,
256
,
256
);
var
x
=
0
,
y
=
0
;
for
(
var
i
=
0
,
j
=
0
,
l
=
image
.
data
.
length
;
i
<
l
;
i
+=
4
,
j
++
)
{
x
=
j
%
256
;
y
=
x
==
0
?
y
+
1
:
y
;
image
.
data
[
i
+
2
]
=
Math
.
floor
(
x
^
y
);
image
.
data
[
i
+
3
]
=
255
;
}
context
.
putImageData
(
image
,
0
,
0
);
return
canvas
;
}
var
theText
=
"
B
"
;
//Hello three.js :)
var
hash
=
document
.
location
.
hash
.
substr
(
1
);
if
(
hash
.
length
===
0
)
{
}
else
{
theText
=
hash
;
}
//var
text3d
=
new
THREE
.
Text
(
theText
,
{
size
:
80
,
height
:
40
,
curveSegments
:
2
,
font
:
"
helvetiker
"
});
//MEsh Normal MeshBasic
//MeshPhongMaterial MeshLambertMaterial MeshPhongMaterial
// new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff, wireframe:false} )
//text = new THREE.Mesh( text3d, materials[6] ); materials[3]
//new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff, wireframe:false } )
// Math.random() *
//0xf0f0f0
/*
* color: <hex>,
* ambient: <hex>,
* specular: <hex>,
* shininess: <float>,2
* opacity: <float>,
*/
var
textMaterial
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xa0a0a0
,
wireframe
:
false
,
opacity
:
1
,
shininess
:
100
,
ambient
:
0xff0000
,
specular
:
0x00ff00
,
reflectivity
:
100
});
textMaterial
=
materials
[
9
];
text
=
new
THREE
.
Mesh
(
text3d
,
textMaterial
);
text
.
overdraw
=
true
;
text
.
doubleSided
=
false
;
text
.
position
.
y
=
15
;
text
.
position
.
z
=
0
;
text
.
rotation
.
x
=
0
*
Math
.
PI
;
text
.
rotation
.
y
=
Math
.
PI
*
2
;
text
.
overdraw
=
false
;
scene
.
addObject
(
text
);
//scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
ambientLight
=
new
THREE
.
AmbientLight
(
0xffffff
)
;
scene
.
addLight
(
ambientLight
);
pointLight
=
new
THREE
.
PointLight
(
0xffffff
,
1
);
pointLight
.
position
.
x
=
0
;
pointLight
.
position
.
y
=
150
;
pointLight
.
position
.
z
=
450
;
scene
.
addLight
(
pointLight
);
//Math.random() *
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
);
/*
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
*/
directionalLight
.
position
.
x
=
50
;
directionalLight
.
position
.
y
=
50
;
directionalLight
.
position
.
z
=
50
;
directionalLight
.
position
.
normalize
();
directionalLight
.
lookAt
(
text
);
directionalLight
.
castShadow
=
true
;
//intensity, distance, castShadow
scene
.
addLight
(
directionalLight
);
//0x202020
// Plane
// ,reflectivity:1,refractionRatio:0
//, shading:THREE.FlatShading
//new THREE.MeshBasicMaterial( { color: 0xe0e0e0, wireframe:false} )
//new THREE.MeshPhongMaterial( { color: 0xf0f0f0, wireframe:false,shininess:100})
plane
=
new
THREE
.
Mesh
(
new
THREE
.
Plane
(
800
,
800
),
textMaterial
);
plane
.
rotation
.
x
=
-
90
*
(
Math
.
PI
/
180
);
plane
.
position
.
x
=
0
;
plane
.
overdraw
=
true
;
scene
.
addObject
(
plane
);
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
);
//mousedown
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseDown
,
false
);
document
.
addEventListener
(
'
touchstart
'
,
onDocumentTouchStart
,
false
);
document
.
addEventListener
(
'
touchmove
'
,
onDocumentTouchMove
,
false
);
var
effectController
=
{
focus
:
1.0
,
aperture
:
0.025
,
maxblur
:
1.0
,
ambientLightColor
:
0.5
,
directionLightX
:
1
,
directionLightY
:
1
,
directionLightZ
:
1
,
pointLightX
:
0
,
pointLightY
:
1
,
pointLightZ
:
1
,
pointLightDistance
:
0
,
pointLightIntensity
:
-
1
,
text
:
"
Hello World!
"
,
wireframe
:
false
};
var
textChanger
=
function
()
{
console
.
log
(
effectController
.
text
);
/*
text3d.set(effectController.text);
text3d.__dirtyVertices = true;
text3d.__dirtyNormals = true;
text3d.__dirtyColors = true;
text3d.__dirtyElements = true;
text3d.__dirtyMorphTargets = true;
text3d.__dirtyNormals = true;
text3d.__dirtyTangents = true;
text3d.__dirtyUvs = true;
text3d.__dirtyVertices = true;
renderer.clear();
*/
scene
.
removeChild
(
text
);
text3d
=
new
THREE
.
Text
(
effectController
.
text
,
{
size
:
80
,
height
:
40
,
curveSegments
:
2
,
font
:
"
helvetiker
"
});
text
=
new
THREE
.
Mesh
(
text3d
,
textMaterial
)
scene
.
addChild
(
text
);
}
var
matChanger
=
function
(
)
{
//postprocessing.bokeh_uniforms["focus"].value = effectController.focus;
//postprocessing.bokeh_uniforms["aperture"].value = effectController.aperture;
//postprocessing.bokeh_uniforms["maxblur"].value = effectController.maxblur;\
ambientLight
.
color
.
setHex
(
effectController
.
ambientLightColor
*
0xffffff
);
directionalLight
.
position
.
x
=
50
*
effectController
.
directionLightX
;
directionalLight
.
position
.
y
=
50
*
effectController
.
directionLightY
;
directionalLight
.
position
.
z
=
50
*
effectController
.
directionLightZ
;
pointLight
.
position
.
x
=
500
*
effectController
.
pointLightX
;
pointLight
.
position
.
y
=
500
*
effectController
.
pointLightY
;
pointLight
.
position
.
z
=
500
*
effectController
.
pointLightZ
;
pointLight
.
distance
=
effectController
.
pointLightDistance
;
pointLight
.
intensity
=
effectController
.
pointLightIntensity
;
};
var
gui
=
new
GUI
();
//gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
//gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
//gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
gui
.
add
(
effectController
,
"
text
"
).
onChange
(
textChanger
);
gui
.
add
(
effectController
,
"
wireframe
"
);
gui
.
add
(
effectController
,
"
ambientLightColor
"
,
0.0
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
directionLightX
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
directionLightY
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
directionLightZ
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pointLightX
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pointLightY
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pointLightZ
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pointLightDistance
"
,
-
1
,
1
,
0.01
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pointLightIntensity
"
,
-
1
,
1.0
,
0.025
).
onChange
(
matChanger
);
gui
.
show
();
matChanger
();
}
//
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
;
mouseY
=
event
.
clientY
-
windowHalfY
;
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
()
{
//console.log("targetRotation",targetRotation,text.rotation.y );
//plane.rotation.z =
//text.rotation.y += ( targetRotation - text.rotation.y ) * 0.05;
//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
//camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
//camera.position.z;
//camera.useTarget = false;
//camera.rotation.z += ( targetRotation - camera.rotation.z ) * 0.05;
//camera.rotation.y += ( targetRotation - camera.rotation.y ) * 0.05;
//renderer.clear();
camera
.
position
.
x
=
Math
.
cos
(
(
mouseX
-
windowHalfX
)
/
windowHalfX
*
Math
.
PI
+
Math
.
PI
/
2
)
*
500
+
camera
.
target
.
position
.
x
;
camera
.
position
.
z
=
-
Math
.
sin
(
(
mouseX
-
windowHalfX
)
/
windowHalfX
*
Math
.
PI
+
Math
.
PI
/
2
)
*
500
;
// + camera.target.position.z + Math.sin(
//(mouseY - windowHalfY)/windowHalfY * Math.PI + Math.PI/2
//) * 500
/*
camera.position.y = Math.cos(
(mouseY - windowHalfY)/windowHalfY * Math.PI + Math.PI/2
) * 500 + camera.target.position.y;
*/
camera
.
position
.
y
=
(
windowHalfY
-
mouseY
)
/
windowHalfY
*
200
+
camera
.
target
.
position
.
y
;
//
renderer
.
render
(
scene
,
camera
);
// Camera movement
// Camera rotation
// Text angle
// Text rotation
// Keydowns
// Settings
// Materials
}
</script>
<script>
var
_gaq
=
[[
"
_setAccount
"
,
"
UA-7549263-1
"
],[
"
_trackPageview
"
]];
(
function
(
d
,
t
){
var
g
=
d
.
createElement
(
t
),
s
=
d
.
getElementsByTagName
(
t
)[
0
];
g
.
async
=
1
;
g
.
src
=
(
"
https:
"
==
location
.
protocol
?
"
//ssl
"
:
"
//www
"
)
+
"
.google-analytics.com/ga.js
"
;
s
.
parentNode
.
insertBefore
(
g
,
s
)}(
document
,
"
script
"
));
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录