Question

我的脸上有颜色或纹理的立方体。

我旋转它但我需要在每次旋转后跟踪面部颜色的位置。

例如，在开始时，绿色是顶部，前面是蓝色，剩下红色。因此，点击＆＃34;获取位置＆＃34;，我应该得到＆＃34; gbr＆＃34;。

我点击＆＃34;旋转＆＃34;。

然后函数getPosition（）应返回＆＃34; rbn＆＃34; （顶部为红色，正面为蓝色，左侧为无。）

有没有办法用three.js来做呢？

cube.material，cube.geometry.vertices，cube.geometry.faces或其他任何内容都有此信息吗？

以下是所有代码：

＆＃13;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
renderer = new THREE.WebGLRenderer({
  alpha: true
});
renderer.setSize(500, 500);
document.getElementById('cube').appendChild(renderer.domElement);

camera.position.x = -2;
camera.position.y = 2;
camera.position.z = 4;

var material = [
  new THREE.MeshBasicMaterial({
    color: '#000000'
  }), // right
  new THREE.MeshBasicMaterial({
    color: '#FF0000'
  }), // left
  new THREE.MeshBasicMaterial({
    color: '#00FF00'
  }), // top
  new THREE.MeshBasicMaterial({
    color: '#000000'
  }), // bottom
  new THREE.MeshBasicMaterial({
    color: '#0000FF'
  }), // front
  new THREE.MeshBasicMaterial({
    color: '#000000'
  }) // back
]
var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
scene.add(cube);

var domove = false;
var stoprotation;

animate();

function animate() {
  requestAnimationFrame(animate);

  if (domove) {
    cube.rotation.z -= 0.05;
    if (cube.rotation.z <= stoprotation) {
      domove = false;
    }
  }

  renderer.render(scene, camera);
} // animate

function rotate() {
  if (domove) {
    console.log('SKIP : currently rotating');
    return;
  }
  stoprotation = cube.rotation.z - Math.PI / 2;
  domove = true;
} // move

function getPosition() {
  console.log(cube.material);
  console.log(cube.geometry.vertices);
  console.log(cube.geometry.faces);
}

＆＃13;

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<div id="cube" width="300" height="300"></div>
<a href="javascript:getPosition()">get position</a><br>
<a href="javascript:rotate()">rotate</a>

＆＃13;

Three.js：旋转立方体和跟踪面部位置

0 个答案: