Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
918f36cf
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,发现更多精彩内容 >>
提交
918f36cf
编写于
8月 31, 2011
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fixed broken shaders example.
上级
743363b5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
33 addition
and
50 deletion
+33
-50
examples/webgl_materials_shaders.html
examples/webgl_materials_shaders.html
+33
-50
未找到文件。
examples/webgl_materials_shaders.html
浏览文件 @
918f36cf
...
...
@@ -16,7 +16,6 @@
h1
{
}
a
{
color
:
skyblue
}
canvas
{
pointer-events
:
none
;
z-index
:
10
;
}
#log
{
position
:
absolute
;
top
:
50px
;
text-align
:
left
;
display
:
block
;
z-index
:
100
}
#d
{
text-align
:
center
;
margin
:
1em
0
-19.7em
0
;
z-index
:
0
;
position
:
relative
;
display
:
block
}
.button
{
background
:
orange
;
color
:
#fff
;
padding
:
0.2em
0.5em
;
cursor
:
pointer
}
.inactive
{
background
:
#999
;
color
:
#eee
}
...
...
@@ -39,8 +38,6 @@
<p>
Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre
id=
"log"
></pre>
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
...
...
@@ -69,8 +66,8 @@
var
render_canvas
=
1
,
render_gl
=
1
;
var
has_gl
=
0
;
var
bcanvas
=
document
.
getElementById
(
"
rcanvas
"
);
var
bwebgl
=
document
.
getElementById
(
"
rwebgl
"
);
var
bcanvas
=
document
.
getElementById
(
"
rcanvas
"
);
var
bwebgl
=
document
.
getElementById
(
"
rwebgl
"
);
init
();
animate
();
...
...
@@ -82,16 +79,14 @@
function
addMesh
(
geometry
,
scale
,
x
,
y
,
z
,
rx
,
ry
,
rz
,
material
)
{
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
scale
;
mesh
.
position
.
x
=
x
;
mesh
.
position
.
y
=
y
;
mesh
.
position
.
z
=
z
;
mesh
.
rotation
.
x
=
rx
;
mesh
.
rotation
.
y
=
ry
;
mesh
.
rotation
.
z
=
rz
;
mesh
.
scale
.
set
(
scale
,
scale
,
scale
);
mesh
.
position
.
set
(
x
,
y
,
z
);
mesh
.
rotation
.
set
(
rx
,
ry
,
rz
);
mesh
.
overdraw
=
true
;
mesh
.
updateMatrix
();
scene
.
addObject
(
mesh
);
scene
.
addObject
(
mesh
);
}
...
...
@@ -112,28 +107,24 @@
scene
.
addLight
(
ambient
);
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
);
directionalLight
.
position
.
x
=
1
;
directionalLight
.
position
.
y
=
1
;
directionalLight
.
position
.
z
=
2
;
directionalLight
.
position
.
set
(
1
,
1
,
2
);
directionalLight
.
position
.
normalize
();
scene
.
addLight
(
directionalLight
);
pointLight
=
new
THREE
.
PointLight
(
0xffffff
);
pointLight
.
position
.
x
=
0
;
pointLight
.
position
.
y
=
0
;
pointLight
.
position
.
z
=
0
;
scene
.
addLight
(
pointLight
);
// light representation
sphere
=
new
THREE
.
SphereGeometry
(
100
,
16
,
8
);
lightMesh
=
new
THREE
.
Mesh
(
sphere
,
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
}
)
);
lightMesh
.
scale
.
x
=
lightMesh
.
scale
.
y
=
lightMesh
.
scale
.
z
=
0.05
;
lightMesh
.
scale
.
set
(
0.05
,
0.05
,
0.05
)
;
lightMesh
.
position
=
pointLight
.
position
;
lightMesh
.
overdraw
=
true
;
lightMesh
.
updateMatrix
();
scene
.
addObject
(
lightMesh
);
// material samples
sphere
=
new
THREE
.
SphereGeometry
(
100
,
32
,
32
);
var
y1
=
0
,
y2
=
-
200
;
...
...
@@ -159,16 +150,22 @@
addMesh
(
sphere
,
1
,
600
,
y1
,
0
,
0
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x000000
,
color
:
0x5500ff
,
specular
:
0x555555
,
shininess
:
30
}
)
);
addMesh
(
sphere
,
1
,
600
,
y2
,
0
,
0
,
0
,
0
,
new
THREE
.
MeshLambertMaterial
(
{
color
:
0x5500ff
}
)
);
addToruses
(
new
THREE
.
TorusGeometry
(
100
,
20
,
32
,
32
)
);
//
if
(
render_gl
)
{
try
{
webglRenderer
=
new
THREE
.
WebGLRenderer
();
webglRenderer
.
setSize
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
);
webglRenderer
.
domElement
.
style
.
position
=
"
relative
"
;
container
.
appendChild
(
webglRenderer
.
domElement
);
has_gl
=
1
;
}
catch
(
e
)
{
}
catch
(
e
)
{
}
}
...
...
@@ -181,6 +178,7 @@
}
//
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
...
...
@@ -191,27 +189,21 @@
bcanvas
.
addEventListener
(
"
click
"
,
toggleCanvas
,
false
);
bwebgl
.
addEventListener
(
"
click
"
,
toggleWebGL
,
false
);
var
loader
=
new
THREE
.
JSONLoader
();
loader
.
load
(
{
model
:
"
obj/torus/Torus_slim.js
"
,
callback
:
function
(
geometry
)
{
createScene
(
geometry
)
}
}
);
//var loader = new THREE.BinaryLoader();
//loader.load( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
}
function
createScene
(
geometry
)
{
function
addToruses
(
geometry
)
{
var
s
=
80
,
t
=
s
+
20
,
y
=
20
0
;
var
s
=
0.85
,
t
=
s
+
100
,
y
=
200
,
rx
=
0
;
addMesh
(
geometry
,
s
,
-
6
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x000000
,
color
:
0x000000
,
specular
:
0x333333
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
-
4
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x888888
,
specular
:
0x333333
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
-
2
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0xff5500
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
0
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0xffaa00
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
2
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x55ff00
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
4
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x0055ff
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
6
*
t
,
y
,
0
,
1.57
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x5500ff
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
-
6
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x000000
,
color
:
0x000000
,
specular
:
0x333333
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
-
4
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x888888
,
specular
:
0x333333
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
-
2
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0xff5500
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
0
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0xffaa00
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
2
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x55ff00
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
4
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x0055ff
,
shininess
:
10
}
)
);
addMesh
(
geometry
,
s
,
6
*
t
,
y
,
0
,
rx
,
0
,
0
,
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0x030303
,
specular
:
0x5500ff
,
shininess
:
10
}
)
);
}
...
...
@@ -240,24 +232,15 @@
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
updateMatrix
();
lightMesh
.
position
.
x
=
700
*
Math
.
cos
(
timer
);
lightMesh
.
position
.
z
=
700
*
Math
.
sin
(
timer
);
lightMesh
.
updateMatrix
();
lightMesh
.
position
.
x
=
700
*
Math
.
cos
(
timer
);
lightMesh
.
position
.
z
=
700
*
Math
.
sin
(
timer
);
if
(
render_canvas
)
canvasRenderer
.
render
(
scene
,
camera
);
if
(
render_gl
&&
has_gl
)
webglRenderer
.
render
(
scene
,
camera
);
}
function
log
(
text
)
{
var
e
=
document
.
getElementById
(
"
log
"
);
e
.
innerHTML
=
text
+
"
<br/>
"
+
e
.
innerHTML
;
}
function
toggleCanvas
()
{
render_canvas
=
!
render_canvas
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录