Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
c1c52a44
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,发现更多精彩内容 >>
提交
c1c52a44
编写于
9月 11, 2012
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Added CSS3DRenderer with an example.
上级
79666b29
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
655 addition
and
370 deletion
+655
-370
build/three.min.js
build/three.min.js
+370
-370
examples/js/renderers/CSS3DRenderer.js
examples/js/renderers/CSS3DRenderer.js
+153
-0
examples/misc_css3d.html
examples/misc_css3d.html
+102
-0
utils/includes/css3d.json
utils/includes/css3d.json
+30
-0
未找到文件。
build/three.min.js
浏览文件 @
c1c52a44
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
examples/js/renderers/CSS3DRenderer.js
0 → 100644
浏览文件 @
c1c52a44
/**
* Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
* @author mrdoob / http://mrdoob.com/
*/
THREE
.
CSS3DObject
=
function
(
element
)
{
THREE
.
Object3D
.
call
(
this
);
this
.
element
=
element
;
this
.
element
.
style
.
position
=
"
absolute
"
;
this
.
element
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
this
.
element
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
this
.
element
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
};
THREE
.
CSS3DObject
.
prototype
=
Object
.
create
(
THREE
.
Object3D
.
prototype
);
//
THREE
.
CSS3DRenderer
=
function
()
{
console
.
log
(
'
THREE.CSS3DRenderer
'
,
THREE
.
REVISION
);
var
_width
,
_height
;
var
_widthHalf
,
_heightHalf
;
var
_projector
=
new
THREE
.
Projector
();
this
.
domElement
=
document
.
createElement
(
'
div
'
);
this
.
domElement
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
this
.
domElement
.
style
.
WebkitPerspectiveOrigin
=
'
50% 50%
'
;
this
.
domElement
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
this
.
domElement
.
style
.
MozPerspectiveOrigin
=
'
50% 50%
'
;
this
.
domElement
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
this
.
domElement
.
style
.
oPerspectiveOrigin
=
'
50% 50%
'
;
// TODO: Shouldn't it be possible to remove cameraElement?
this
.
cameraElement
=
document
.
createElement
(
'
div
'
);
this
.
cameraElement
.
style
.
WebkitTransformStyle
=
'
preserve-3d
'
;
this
.
cameraElement
.
style
.
MozTransformStyle
=
'
preserve-3d
'
;
this
.
cameraElement
.
style
.
oTransformStyle
=
'
preserve-3d
'
;
this
.
domElement
.
appendChild
(
this
.
cameraElement
);
this
.
setSize
=
function
(
width
,
height
)
{
_width
=
width
;
_height
=
height
;
_widthHalf
=
_width
/
2
;
_heightHalf
=
_height
/
2
;
this
.
domElement
.
style
.
width
=
width
+
'
px
'
;
this
.
domElement
.
style
.
height
=
height
+
'
px
'
;
this
.
cameraElement
.
style
.
width
=
width
+
'
px
'
;
this
.
cameraElement
.
style
.
height
=
height
+
'
px
'
;
};
var
epsilon
=
function
(
value
)
{
return
Math
.
abs
(
value
)
<
0.000001
?
0
:
value
;
}
var
getCameraCSSMatrix
=
function
(
matrix
)
{
var
elements
=
matrix
.
elements
;
return
'
matrix3d(
'
+
epsilon
(
elements
[
0
]
)
+
'
,
'
+
epsilon
(
-
elements
[
1
]
)
+
'
,
'
+
epsilon
(
elements
[
2
]
)
+
'
,
'
+
epsilon
(
elements
[
3
]
)
+
'
,
'
+
epsilon
(
elements
[
4
]
)
+
'
,
'
+
epsilon
(
-
elements
[
5
]
)
+
'
,
'
+
epsilon
(
elements
[
6
]
)
+
'
,
'
+
epsilon
(
elements
[
7
]
)
+
'
,
'
+
epsilon
(
elements
[
8
]
)
+
'
,
'
+
epsilon
(
-
elements
[
9
]
)
+
'
,
'
+
epsilon
(
elements
[
10
]
)
+
'
,
'
+
epsilon
(
elements
[
11
]
)
+
'
,
'
+
epsilon
(
elements
[
12
]
)
+
'
,
'
+
epsilon
(
-
elements
[
13
]
)
+
'
,
'
+
epsilon
(
elements
[
14
]
)
+
'
,
'
+
epsilon
(
elements
[
15
]
)
+
'
)
'
;
}
var
getObjectCSSMatrix
=
function
(
matrix
)
{
var
elements
=
matrix
.
elements
;
return
'
translate3d(-50%,-50%,0) scale3d(1,-1,1) matrix3d(
'
+
epsilon
(
elements
[
0
]
)
+
'
,
'
+
epsilon
(
elements
[
1
]
)
+
'
,
'
+
epsilon
(
elements
[
2
]
)
+
'
,
'
+
epsilon
(
elements
[
3
]
)
+
'
,
'
+
epsilon
(
elements
[
4
]
)
+
'
,
'
+
epsilon
(
elements
[
5
]
)
+
'
,
'
+
epsilon
(
elements
[
6
]
)
+
'
,
'
+
epsilon
(
elements
[
7
]
)
+
'
,
'
+
epsilon
(
elements
[
8
]
)
+
'
,
'
+
epsilon
(
elements
[
9
]
)
+
'
,
'
+
epsilon
(
elements
[
10
]
)
+
'
,
'
+
epsilon
(
elements
[
11
]
)
+
'
,
'
+
epsilon
(
elements
[
12
]
)
+
'
,
'
+
epsilon
(
elements
[
13
]
)
+
'
,
'
+
epsilon
(
elements
[
14
]
)
+
'
,
'
+
epsilon
(
elements
[
15
]
)
+
'
)
'
;
}
this
.
render
=
function
(
scene
,
camera
)
{
var
fov
=
0.5
/
Math
.
tan
(
camera
.
fov
*
Math
.
PI
/
360
)
*
_height
;
this
.
domElement
.
style
.
WebkitPerspective
=
fov
+
"
px
"
;
this
.
domElement
.
style
.
MozPerspective
=
fov
+
"
px
"
;
this
.
domElement
.
style
.
oPerspective
=
fov
+
"
px
"
;
var
style
=
"
translate3d(0,0,
"
+
fov
+
"
px)
"
+
getCameraCSSMatrix
(
camera
.
matrixWorldInverse
)
+
"
translate3d(
"
+
_widthHalf
+
"
px,
"
+
_heightHalf
+
"
px, 0)
"
;
this
.
cameraElement
.
style
.
WebkitTransform
=
style
;
this
.
cameraElement
.
style
.
MozTransform
=
style
;
this
.
cameraElement
.
style
.
oTransform
=
style
;
var
objects
=
_projector
.
projectScene
(
scene
,
camera
,
false
).
objects
;
for
(
var
i
=
0
,
il
=
objects
.
length
;
i
<
il
;
i
++
)
{
var
object
=
objects
[
i
].
object
;
var
element
=
object
.
element
;
style
=
getObjectCSSMatrix
(
object
.
matrixWorld
);
element
.
style
.
WebkitTransform
=
style
;
element
.
style
.
MozTransform
=
style
;
element
.
style
.
oTransform
=
style
;
}
};
};
examples/misc_css3d.html
0 → 100644
浏览文件 @
c1c52a44
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<style>
body
{
background-color
:
#ffffff
;
margin
:
0
;
overflow
:
hidden
;
}
</style>
</head>
<body>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/renderers/CSS3DRenderer.js"
></script>
<script>
var
camera
,
scene
,
renderer
;
var
geometry
,
material
,
mesh
;
var
scene2
,
renderer2
;
var
controls
;
init
();
animate
();
function
init
()
{
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
set
(
200
,
200
,
200
);
scene
=
new
THREE
.
Scene
();
geometry
=
new
THREE
.
CubeGeometry
(
200
,
200
,
200
);
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x000000
,
wireframe
:
true
,
wireframeLinewidth
:
1
}
);
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
renderer
=
new
THREE
.
CanvasRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
//
scene2
=
new
THREE
.
Scene
();
renderer2
=
new
THREE
.
CSS3DRenderer
();
renderer2
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer2
.
domElement
.
style
.
position
=
'
absolute
'
;
renderer2
.
domElement
.
style
.
top
=
0
;
document
.
body
.
appendChild
(
renderer2
.
domElement
);
for
(
var
i
=
0
;
i
<
20
;
i
++
)
{
var
element
=
document
.
createElement
(
'
div
'
);
element
.
style
.
width
=
'
100px
'
;
element
.
style
.
height
=
'
100px
'
;
element
.
style
.
background
=
new
THREE
.
Color
(
Math
.
random
()
*
0xffffff
).
getContextStyle
();
renderer2
.
cameraElement
.
appendChild
(
element
);
var
object
=
new
THREE
.
CSS3DObject
(
element
);
object
.
position
.
x
=
Math
.
random
()
*
200
-
100
;
object
.
position
.
y
=
Math
.
random
()
*
200
-
100
;
object
.
position
.
z
=
Math
.
random
()
*
200
-
100
;
object
.
scale
.
x
=
Math
.
random
()
+
0.5
;
object
.
scale
.
y
=
Math
.
random
()
+
0.5
;
scene2
.
add
(
object
);
}
controls
=
new
THREE
.
TrackballControls
(
camera
);
controls
.
rotateSpeed
=
1.0
;
controls
.
zoomSpeed
=
1.2
;
controls
.
panSpeed
=
0.8
;
controls
.
noZoom
=
false
;
controls
.
noPan
=
false
;
controls
.
staticMoving
=
false
;
controls
.
dynamicDampingFactor
=
0.3
;
controls
.
keys
=
[
65
,
83
,
68
];
}
function
animate
()
{
requestAnimationFrame
(
animate
);
controls
.
update
();
renderer
.
render
(
scene
,
camera
);
renderer2
.
render
(
scene2
,
camera
);
}
</script>
</body>
</html>
utils/includes/css3d.json
0 → 100644
浏览文件 @
c1c52a44
[
"../src/Three.js"
,
"../src/core/Vector2.js"
,
"../src/core/Vector3.js"
,
"../src/core/Vector4.js"
,
"../src/core/Matrix3.js"
,
"../src/core/Matrix4.js"
,
"../src/core/EventTarget.js"
,
"../src/core/Frustum.js"
,
"../src/core/Ray.js"
,
"../src/core/Object3D.js"
,
"../src/core/Projector.js"
,
"../src/core/Quaternion.js"
,
"../src/cameras/Camera.js"
,
"../src/cameras/PerspectiveCamera.js"
,
"../src/lights/Light.js"
,
"../src/objects/Particle.js"
,
"../src/objects/Line.js"
,
"../src/objects/Mesh.js"
,
"../src/objects/Bone.js"
,
"../src/objects/Sprite.js"
,
"../src/scenes/Scene.js"
,
"../src/renderers/renderables/RenderableVertex.js"
,
"../src/renderers/renderables/RenderableFace3.js"
,
"../src/renderers/renderables/RenderableFace4.js"
,
"../src/renderers/renderables/RenderableObject.js"
,
"../src/renderers/renderables/RenderableParticle.js"
,
"../src/renderers/renderables/RenderableLine.js"
,
"../examples/js/renderers/CSS3DRenderer.js"
]
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录