我试图结合webgl和css3d场景,以便两个场景中的对象正确地融合在一起.我遵循这里描述的模式:
并通过修改three.js示例css3d_sandbox.html创建了一个简单的示例.
在我的版本中,我在webGl场景中添加了一个立方体,并希望它与现有平面正确混合,无论多维数据集是在这些对象的前面还是后面.
我注意到两个异常现象.第一个是,一旦添加了立方体,当你平移时平面就会消失在意想不到的位置,好像远距离和近距离平面值没有被正确识别,或者对象被错误地确定为落后于其他东西.
第二个问题是css3d对象在针对three.js r67运行时根本不渲染,但它们在对r61运行时会渲染.我尝试用r61替换r67版本的CSS3DRenderer.js,但仍然没有看到任何css3d对象.
在r67中,当添加webGl dom作为css3d dom的子元素的行被注释掉时,css3d对象就会出现.
我很感激有关如何解决这些问题的任何建议.示例代码如下所示,可以通过放入任何版本的three.js示例文件夹(例如r61或r67)来运行.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index: 1;
}
a {
color: #000000;
}
</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - css3d sandbox</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<!--<script src="js/renderers/CSS3DRenderer-r61.js"></script>-->
<script src="js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, sceneGl, rendererGl;
var sceneCss, rendererCss; …