Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
35b6ee85
T
three.js
项目概览
车家大少爷
/
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,发现更多精彩内容 >>
提交
35b6ee85
编写于
8月 11, 2017
作者:
F
Fernando Serrano
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add material attributes and maps
上级
362fc596
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
154 addition
and
53 deletion
+154
-53
examples/gltf_exporter.html
examples/gltf_exporter.html
+38
-27
examples/js/exporters/GLTFExporter.js
examples/js/exporters/GLTFExporter.js
+116
-26
未找到文件。
examples/gltf_exporter.html
浏览文件 @
35b6ee85
...
...
@@ -52,7 +52,7 @@
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
camera
,
scene
1
,
renderer
;
init
();
animate
();
...
...
@@ -65,16 +65,16 @@
camera
=
new
THREE
.
PerspectiveCamera
(
45
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
2000
);
camera
.
position
.
y
=
400
;
scene
=
new
THREE
.
Scene
();
scene
.
name
=
'
Scene1
'
;
scene
1
=
new
THREE
.
Scene
();
scene
1
.
name
=
'
Scene1
'
;
var
light
,
object
;
scene
.
add
(
new
THREE
.
AmbientLight
(
0xffffff
)
);
scene
1
.
add
(
new
THREE
.
AmbientLight
(
0xffffff
)
);
light
=
new
THREE
.
DirectionalLight
(
0xffffff
);
light
.
position
.
set
(
0
,
1
,
0
);
scene
.
add
(
light
);
scene
1
.
add
(
light
);
var
map
=
new
THREE
.
TextureLoader
().
load
(
'
textures/UV_Grid_Sm.jpg
'
);
map
.
wrapS
=
map
.
wrapT
=
THREE
.
RepeatWrapping
;
...
...
@@ -87,21 +87,21 @@
object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material );
object.position.set( -200, 0, 200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material );
object.position.set( 0, 0, 200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
object.position.set( 200, 0, 200 );
scene.add( object );
scene
1
.add( object );
//
object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material );
object.position.set( -400, 0, 0 );
scene.add( object );
scene
1
.add( object );
*/
var
map2
=
new
THREE
.
TextureLoader
().
load
(
'
textures/hardwood2_diffuse.jpg
'
);
...
...
@@ -111,11 +111,11 @@
metalness
:
0.5
,
roughness
:
1.0
}
);
/*
object = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 32, 32 ), material );
object.position.set( 0, 0, 0 );
object.name = "Sphere";
scene
.
add
(
object
);
scene
1
.add(object);
/*
var material = new THREE.MeshStandardMaterial( {
color: 0xff0000,
...
...
@@ -131,38 +131,49 @@
object3 = new THREE.Mesh( new THREE.CylinderBufferGeometry( 100, 100, 100 ), material );
object3.position.set( 200, 0, 0 );
object3.name = "Cube";
scene.add(object3);
scene
1
.add(object3);
*/
/*
object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), material );
object.position.set( -200, 0, 0 );
object.name = "Cube";
scene1.add( object );
object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 10, 80, 2, 2, 2 ), material );
object2.position.set( 0, 0, 50 );
object2.rotation.set( 0, 45, 0 );
object2.name = "SubCube";
object.add( object2 );
*/
object
=
new
THREE
.
Group
();
object
.
name
=
"
Group
"
;
scene1
.
add
(
object
);
object2
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
30
,
30
,
30
),
material
);
object2
.
name
=
"
Cube in group
"
;
object2
.
position
.
set
(
0
,
100
,
100
);
object
.
add
(
object2
);
scene
.
add
(
object
);
scene
.
add
(
camera
);
scene
1
.
add
(
camera
);
var
cameraOrtho
=
new
THREE
.
OrthographicCamera
(
window
.
innerWidth
/
-
2
,
window
.
innerWidth
/
2
,
window
.
innerHeight
/
2
,
window
.
innerHeight
/
-
2
,
-
10
,
10
);
scene
.
add
(
cameraOrtho
);
scene
1
.
add
(
cameraOrtho
);
/*
object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
object.position.set( 0, 0, 0 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object.position.set( 200, 0, 0 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
object.position.set( 400, 0, 0 );
scene.add( object );
scene
1
.add( object );
*/
//
/*
...
...
@@ -176,23 +187,23 @@
object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
object.position.set( -400, 0, -200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
object.position.set( -200, 0, -200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
object.position.set( 0, 0, -200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.AxisHelper( 50 );
object.position.set( 200, 0, -200 );
scene.add( object );
scene
1
.add( object );
object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 );
object.position.set( 400, 0, -200 );
scene.add( object );
scene
1
.add( object );
*/
var
scene2
=
new
THREE
.
Scene
();
...
...
@@ -218,8 +229,8 @@
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
var
gltfExporter
=
new
THREE
.
GLTFExporter
(
renderer
);
gltfExporter
.
parse
(
[
scene
,
scene2
],
function
(
result
)
{
console
.
log
(
JSON
.
stringify
(
result
,
null
,
2
)
);
gltfExporter
.
parse
(
[
scene1
],
function
(
result
)
{
console
.
log
(
JSON
.
stringify
(
result
,
null
,
2
)
);
}
);
}
...
...
@@ -250,8 +261,8 @@
camera
.
position
.
x
=
Math
.
cos
(
timer
)
*
800
;
camera
.
position
.
z
=
Math
.
sin
(
timer
)
*
800
;
camera
.
lookAt
(
scene
.
position
);
renderer
.
render
(
scene
,
camera
);
camera
.
lookAt
(
scene
1
.
position
);
renderer
.
render
(
scene
1
,
camera
);
}
...
...
examples/js/exporters/GLTFExporter.js
浏览文件 @
35b6ee85
...
...
@@ -40,7 +40,7 @@ THREE.GLTFExporter.prototype = {
/**
* Compare two arrays
*/
function
same
Array
(
array1
,
array2
)
{
function
equal
Array
(
array1
,
array2
)
{
return
(
array1
.
length
===
array2
.
length
)
&&
array1
.
every
(
function
(
element
,
index
)
{
return
element
===
array2
[
index
];
});
...
...
@@ -275,32 +275,118 @@ THREE.GLTFExporter.prototype = {
}
// @QUESTION Should we avoid including any attribute that has the default value?
var
gltfMaterial
=
{
pbrMetallicRoughness
:
{
var
gltfMaterial
=
{};
if
(
material
instanceof
THREE
.
MeshStandardMaterial
)
{
gltfMaterial
.
pbrMetallicRoughness
=
{
baseColorFactor
:
material
.
color
.
toArray
().
concat
(
[
material
.
opacity
]
),
metallicFactor
:
material
.
metalness
,
roughnessFactor
:
material
.
roughness
};
}
if
(
material
instanceof
THREE
.
MeshBasicMaterial
)
{
// emissiveFactor
var
color
=
material
.
color
.
toArray
();
if
(
!
equalArray
(
color
,
[
0
,
0
,
0
]
)
)
{
gltfMaterial
.
emissiveFactor
=
color
;
}
};
if
(
material
.
map
)
{
gltfMaterial
.
pbrMetallicRoughness
.
baseColorTexture
=
{
index
:
processTexture
(
material
.
map
),
texCoord
:
0
// @FIXME
// emissiveTexture
if
(
material
.
map
)
{
gltfMaterial
.
emissiveTexture
=
{
index
:
processTexture
(
material
.
map
),
texCoord
:
0
// @FIXME
};
}
}
else
{
// emissiveFactor
var
emissive
=
material
.
emissive
.
toArray
();
if
(
!
equalArray
(
emissive
,
[
0
,
0
,
0
]
)
)
{
gltfMaterial
.
emissiveFactor
=
emissive
;
}
// pbrMetallicRoughness.baseColorTexture
if
(
material
.
map
)
{
gltfMaterial
.
pbrMetallicRoughness
.
baseColorTexture
=
{
index
:
processTexture
(
material
.
map
),
texCoord
:
0
// @FIXME
};
}
// emissiveTexture
if
(
material
.
emissiveMap
)
{
gltfMaterial
.
emissiveTexture
=
{
index
:
processTexture
(
material
.
emissiveMap
),
texCoord
:
0
// @FIXME
};
}
}
// normalTexture
if
(
material
.
normalMap
)
{
gltfMaterial
.
normalTexture
=
{
index
:
processTexture
(
material
.
normalMap
),
texCoord
:
0
// @FIXME
};
}
// occlusionTexture
if
(
material
.
aoMap
)
{
gltfMaterial
.
occlusionTexture
=
{
index
:
processTexture
(
material
.
aoMap
),
texCoord
:
0
// @FIXME
};
}
// alphaMode
if
(
material
.
transparent
)
{
gltfMaterial
.
alphaMode
=
'
BLEND
'
;
// @FIXME We should detect MASK or BLEND
}
// doubleSided
if
(
material
.
side
===
THREE
.
DoubleSide
)
{
gltfMaterial
.
doubleSided
=
true
;
}
if
(
material
.
name
)
{
if
(
material
.
name
!==
undefined
)
{
gltfMaterial
.
name
=
material
.
name
;
}
outputJSON
.
materials
.
push
(
gltfMaterial
);
return
outputJSON
.
materials
.
length
-
1
;
}
/**
...
...
@@ -397,7 +483,7 @@ THREE.GLTFExporter.prototype = {
}
if
(
camera
.
name
)
{
if
(
camera
.
name
!==
undefined
)
{
gltfCamera
.
name
=
camera
.
type
;
}
...
...
@@ -424,26 +510,26 @@ THREE.GLTFExporter.prototype = {
var
position
=
object
.
position
.
toArray
();
var
scale
=
object
.
scale
.
toArray
();
if
(
!
same
Array
(
rotation
,
[
0
,
0
,
0
,
1
]
)
)
{
if
(
!
equal
Array
(
rotation
,
[
0
,
0
,
0
,
1
]
)
)
{
gltfNode
.
rotation
=
rotation
;
}
if
(
!
same
Array
(
position
,
[
0
,
0
,
0
]
)
)
{
if
(
!
equal
Array
(
position
,
[
0
,
0
,
0
]
)
)
{
gltfNode
.
position
=
position
;
}
if
(
!
same
Array
(
scale
,
[
1
,
1
,
1
]
)
)
{
if
(
!
equal
Array
(
scale
,
[
1
,
1
,
1
]
)
)
{
gltfNode
.
scale
=
scale
;
}
}
else
{
object
.
updateMatrix
();
if
(
!
same
Array
(
object
.
matrix
.
elements
,
[
1
,
0
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
0
,
1
]
)
)
{
if
(
!
equal
Array
(
object
.
matrix
.
elements
,
[
1
,
0
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
0
,
1
]
)
)
{
gltfNode
.
matrix
=
object
.
matrix
.
elements
;
}
};
if
(
object
.
name
)
{
if
(
object
.
name
!==
undefined
)
{
gltfNode
.
name
=
object
.
name
;
}
...
...
@@ -484,7 +570,7 @@ THREE.GLTFExporter.prototype = {
nodes
:
[]
};
if
(
scene
.
name
)
{
if
(
scene
.
name
!==
undefined
)
{
gltfScene
.
name
=
scene
.
name
;
}
...
...
@@ -514,15 +600,19 @@ THREE.GLTFExporter.prototype = {
var
blob
=
new
Blob
(
dataViews
,
{
type
:
'
application/octet-binary
'
}
);
// Update the bytlength of the only main buffer and update the uri with the base64 representation of it
outputJSON
.
buffers
[
0
].
byteLength
=
blob
.
size
;
objectURL
=
URL
.
createObjectURL
(
blob
);
var
reader
=
new
window
.
FileReader
();
reader
.
readAsDataURL
(
blob
);
reader
.
onloadend
=
function
()
{
base64data
=
reader
.
result
;
outputJSON
.
buffers
[
0
].
uri
=
base64data
;
onDone
(
outputJSON
);
}
if
(
outputJSON
.
buffers
&&
outputJSON
.
buffers
.
length
>
0
)
{
outputJSON
.
buffers
[
0
].
byteLength
=
blob
.
size
;
objectURL
=
URL
.
createObjectURL
(
blob
);
var
reader
=
new
window
.
FileReader
();
reader
.
readAsDataURL
(
blob
);
reader
.
onloadend
=
function
()
{
base64data
=
reader
.
result
;
outputJSON
.
buffers
[
0
].
uri
=
base64data
;
onDone
(
outputJSON
);
}
}
else
{
onDone
(
outputJSON
);
}
}
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录