如何解决当用户单击多维数据集的面时,对其进行绘制
我正在尝试按照标题中的内容进行操作。 当用户单击立方体的一个面时,该面将改变颜色。
这是我的代码段:
// create a cube
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.userData.originalColor = 0xffff00;
function onDocumentMouseClick(event) //if we detect a click event
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
event.preventDefault();
// update the mouse variable
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1,0.5 );
vector.unproject( camera );
raycaster.set( camera.position,vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObject( cube );
if ( intersects.length > 0 )
{
var index = Math.floor( intersects[0].faceIndex / 2 );
switch (index)
{
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
}
}
}
此代码不完整。 我的问题是这些:
- 我不知道此策略是否正确
- 我不知道在不同情况下使用什么代码来绘制立方体的那一侧。
解决方法
首先,考虑将多维数据集的面分成绘制组。 This answer深入研究如何做到这一点。
这个想法是立方体的所有面都将具有相同的颜色,但材质却不同。这样,您就可以分别更改材质的颜色,因此,您可以分别更改立方体面的颜色。
从Raycaster
返回响应时,请寻找faceIndex
属性。这将告诉您相交的脸部索引。找到索引所属的绘图组,然后可以引用该组的材质索引,从而更改材质的颜色。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。