Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
eb1f42ed
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,发现更多精彩内容 >>
提交
eb1f42ed
编写于
1月 11, 2018
作者:
L
Lewy Blue
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Refactor cubemap example
上级
38162cc2
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
61 addition
and
32653 deletion
+61
-32653
examples/obj/walt/.htaccess
examples/obj/walt/.htaccess
+0
-7
examples/obj/walt/WaltHead.mtl
examples/obj/walt/WaltHead.mtl
+0
-11
examples/obj/walt/WaltHead.obj
examples/obj/walt/WaltHead.obj
+0
-32459
examples/obj/walt/WaltHead_bin.bin
examples/obj/walt/WaltHead_bin.bin
+0
-0
examples/obj/walt/WaltHead_bin.js
examples/obj/walt/WaltHead_bin.js
+0
-29
examples/obj/walt/WaltHead_slim.js
examples/obj/walt/WaltHead_slim.js
+0
-42
examples/webgl_materials_cubemap.html
examples/webgl_materials_cubemap.html
+61
-105
未找到文件。
examples/obj/walt/.htaccess
已删除
100644 → 0
浏览文件 @
38162cc2
<
Files
*.js
>
SetOutputFilter
DEFLATE
</
Files
>
<
Files
*.bin
>
SetOutputFilter
DEFLATE
</
Files
>
examples/obj/walt/WaltHead.mtl
已删除
100644 → 0
浏览文件 @
38162cc2
# Material Count: 1
newmtl lambert2SG.001
Ns 92.156863
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.250000 0.250000 0.250000
Ni 1.000000
d 1.000000
illum 2
examples/obj/walt/WaltHead.obj
已删除
100644 → 0
浏览文件 @
38162cc2
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
examples/obj/walt/WaltHead_bin.bin
已删除
100644 → 0
浏览文件 @
38162cc2
文件已删除
examples/obj/walt/WaltHead_bin.js
已删除
100644 → 0
浏览文件 @
38162cc2
{
"
metadata
"
:
{
"
formatVersion
"
:
3.1
,
"
sourceFile
"
:
"
WaltHead.obj
"
,
"
generatedBy
"
:
"
OBJConverter
"
,
"
vertices
"
:
8146
,
"
faces
"
:
16160
,
"
normals
"
:
8146
,
"
uvs
"
:
0
,
"
materials
"
:
1
},
"
materials
"
:
[
{
"
DbgColor
"
:
15658734
,
"
DbgIndex
"
:
0
,
"
DbgName
"
:
"
lambert2SG.001
"
,
"
colorDiffuse
"
:
[
0.64
,
0.64
,
0.64
],
"
colorSpecular
"
:
[
0.25
,
0.25
,
0.25
],
"
illumination
"
:
2
,
"
opticalDensity
"
:
1.0
,
"
specularCoef
"
:
92.156863
,
"
opacity
"
:
1.0
}],
"
buffers
"
:
"
WaltHead_bin.bin
"
}
examples/obj/walt/WaltHead_slim.js
已删除
100644 → 0
浏览文件 @
38162cc2
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
examples/webgl_materials_cubemap.html
浏览文件 @
eb1f42ed
...
@@ -6,38 +6,39 @@
...
@@ -6,38 +6,39 @@
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
<style>
body
{
body
{
background
:
#000
;
font-family
:
Monospace
;
color
:
#fff
;
margin
:
0px
;
padding
:
0
;
overflow
:
hidden
;
margin
:
0
;
}
overflow
:
hidden
;
#info
{
font-family
:
georgia
;
color
:
#fff
;
text-align
:
center
;
position
:
absolute
;
top
:
10px
;
width
:
100%
;
text-align
:
center
;
z-index
:
100
;
display
:
block
;
}
#info
a
{
color
:
#ff0080
;
font-weight
:
bold
;
}
}
a
{
color
:
#ff0080
;
text-decoration
:
none
;
}
a
:hover
{
color
:
#0080ff
;
}
canvas
{
pointer-events
:
none
;
z-index
:
10
;
}
#d
{
text-align
:
center
;
margin
:
1em
0
-7.5em
0
;
z-index
:
1000
;
position
:
relative
;
display
:
block
}
.button
{
background
:
orange
;
color
:
#fff
;
padding
:
0.2em
0.5em
;
cursor
:
pointer
}
.inactive
{
background
:
#999
;
color
:
#eee
}
#oldie
{
margin-top
:
11em
!important
}
</style>
</style>
</head>
</head>
<body>
<body>
<div
id=
"d"
>
<p><a
href=
"http://threejs.org"
>
Three.js
</a>
cube mapping demo
<p>
Walt Disney head by
<a
href=
"http://davidoreilly.com/post/18087489343/disneyhead"
target=
"_blank"
rel=
"noopener"
>
David OReilly
</a>
<div
id=
"container"
></div>
<p>
Texture by
<a
href=
"http://www.humus.name/index.php?page=Textures"
target=
"_blank"
rel=
"noopener"
>
Humus
</a>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
- cube mapping demo.
<br
/>
Texture by
<a
href=
"http://www.humus.name/index.php?page=Textures"
target=
"_blank"
rel=
"noopener"
>
Humus
</a>
Walt Disney head by
<a
href=
"http://davidoreilly.com/post/18087489343/disneyhead"
target=
"_blank"
rel=
"noopener"
>
David OReilly
</a>
</div>
</div>
<script
src=
"../build/three.js"
></script>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/loaders/BinaryLoader.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/loaders/OBJLoader.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
...
@@ -52,18 +53,8 @@
...
@@ -52,18 +53,8 @@
var
mesh
,
geometry
;
var
mesh
,
geometry
;
var
loader
;
var
pointLight
;
var
pointLight
;
var
mouseX
=
0
;
var
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
init
();
init
();
animate
();
animate
();
...
@@ -75,8 +66,14 @@
...
@@ -75,8 +66,14 @@
camera
=
new
THREE
.
PerspectiveCamera
(
50
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
5000
);
camera
=
new
THREE
.
PerspectiveCamera
(
50
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
5000
);
camera
.
position
.
z
=
2000
;
camera
.
position
.
z
=
2000
;
//
//controls
var
controls
=
new
THREE
.
OrbitControls
(
camera
);
controls
.
enableZoom
=
false
;
controls
.
enablePan
=
false
;
controls
.
minPolarAngle
=
Math
.
PI
/
4
;
controls
.
maxPolarAngle
=
Math
.
PI
/
1.5
;
//cubemap
var
path
=
"
textures/cube/SwedishRoyalCastle/
"
;
var
path
=
"
textures/cube/SwedishRoyalCastle/
"
;
var
format
=
'
.jpg
'
;
var
format
=
'
.jpg
'
;
var
urls
=
[
var
urls
=
[
...
@@ -88,62 +85,65 @@
...
@@ -88,62 +85,65 @@
var
reflectionCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
var
reflectionCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
reflectionCube
.
format
=
THREE
.
RGBFormat
;
reflectionCube
.
format
=
THREE
.
RGBFormat
;
var
refractionCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
refractionCube
.
mapping
=
THREE
.
CubeRefractionMapping
;
refractionCube
.
format
=
THREE
.
RGBFormat
;
scene
=
new
THREE
.
Scene
();
scene
=
new
THREE
.
Scene
();
scene
.
background
=
reflectionCube
;
scene
.
background
=
reflectionCube
;
// LIGHTS
//lights
var
ambient
=
new
THREE
.
AmbientLight
(
0xffffff
);
var
ambient
=
new
THREE
.
AmbientLight
(
0xffffff
);
scene
.
add
(
ambient
);
scene
.
add
(
ambient
);
pointLight
=
new
THREE
.
PointLight
(
0xffffff
,
2
);
pointLight
=
new
THREE
.
PointLight
(
0xffffff
,
2
);
scene
.
add
(
pointLight
);
scene
.
add
(
pointLight
);
// light representation
//materials
var
cubeMaterial3
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff6600
,
envMap
:
reflectionCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
);
var
cubeMaterial2
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffee00
,
envMap
:
refractionCube
,
refractionRatio
:
0.95
}
);
var
cubeMaterial1
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
reflectionCube
}
);
var
sphere
=
new
THREE
.
SphereGeometry
(
100
,
16
,
8
);
//models
var
objLoader
=
new
THREE
.
OBJLoader
();
var
mesh
=
new
THREE
.
Mesh
(
sphere
,
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
}
)
);
objLoader
.
setPath
(
'
models/obj/walt/
'
);
mesh
.
scale
.
set
(
0.05
,
0.05
,
0.05
);
objLoader
.
load
(
'
WaltHead.obj
'
,
function
(
object
)
{
pointLight
.
add
(
mesh
);
var
refractionCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
var
head
=
object
.
children
[
0
];
refractionCube
.
mapping
=
THREE
.
CubeRefractionMapping
;
refractionCube
.
format
=
THREE
.
RGBFormat
;
//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.25 } );
head
.
scale
.
multiplyScalar
(
15
);
var
cubeMaterial3
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xff6600
,
envMap
:
reflectionCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.3
}
);
head
.
position
.
y
=
-
500
;
var
cubeMaterial2
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffee00
,
envMap
:
refractionCube
,
refractionRatio
:
0.95
}
);
head
.
material
=
cubeMaterial1
;
var
cubeMaterial1
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
envMap
:
reflectionCube
}
);
var
head2
=
head
.
clone
();
head2
.
position
.
x
=
-
900
;
head2
.
material
=
cubeMaterial2
;
var
head3
=
head
.
clone
();
head3
.
position
.
x
=
900
;
head3
.
material
=
cubeMaterial3
;
//
scene
.
add
(
head
,
head2
,
head3
)
}
);
//renderer
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
container
.
appendChild
(
renderer
.
domElement
);
//
//stats
stats
=
new
Stats
();
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
container
.
appendChild
(
stats
.
dom
);
//
loader
=
new
THREE
.
BinaryLoader
();
loader
.
load
(
"
obj/walt/WaltHead_bin.js
"
,
function
(
geometry
)
{
createScene
(
geometry
,
cubeMaterial1
,
cubeMaterial2
,
cubeMaterial3
)
}
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
}
function
onWindowResize
()
{
function
onWindowResize
()
{
windowHalfX
=
window
.
innerWidth
/
2
;
windowHalfY
=
window
.
innerHeight
/
2
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
camera
.
updateProjectionMatrix
();
...
@@ -151,60 +151,16 @@
...
@@ -151,60 +151,16 @@
}
}
function
createScene
(
geometry
,
m1
,
m2
,
m3
)
{
var
s
=
15
;
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
m1
);
mesh
.
position
.
z
=
-
100
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
s
;
scene
.
add
(
mesh
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
m2
);
mesh
.
position
.
x
=
-
900
;
mesh
.
position
.
z
=
-
100
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
s
;
scene
.
add
(
mesh
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
m3
);
mesh
.
position
.
x
=
900
;
mesh
.
position
.
z
=
-
100
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
s
;
scene
.
add
(
mesh
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
)
*
4
;
mouseY
=
(
event
.
clientY
-
windowHalfY
)
*
4
;
}
//
function
animate
()
{
function
animate
()
{
requestAnimationFrame
(
animate
);
requestAnimationFrame
(
animate
);
render
();
render
();
stats
.
update
();
}
}
function
render
()
{
function
render
()
{
var
timer
=
-
0.0002
*
Date
.
now
();
pointLight
.
position
.
x
=
1500
*
Math
.
cos
(
timer
);
pointLight
.
position
.
z
=
1500
*
Math
.
sin
(
timer
);
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
lookAt
(
scene
.
position
);
renderer
.
render
(
scene
,
camera
);
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录