我需要制作一个立方体定向越野比赛的场景。在所有CAD系统中都可以找到这样的立方体。我需要在Angular上实现它。 我使用CSS在儿童的单独组件中绘制了多维数据集。通过按按钮（图中带下划线）[1]：https://i.stack.imgur.com/kaCrR.png旋转。 每按一下将立方体旋转45度。父组件以数组（45.0，-135）的形式接收当前角度。与上一个值比较，获得过渡方向。 摄像机的位置被严格塞成一个阵列。 所有这些或多或少都可以正常工作，但是，CubeView的旋转取决于相机的位置。 我做错事的印象。因为此解决方案在将相机位置转移到CubeView时会带来很多问题。
子组件-CubeView
import { Component, OnInit, Input, Output } from '@angular/core';
@Component({
selector: 'app-cube-view-web-gl',
templateUrl: './cube-view-web-gl.component.html',
styleUrls: ['./cube-view-web-gl.component.scss']
})
export class CubeViewWebGlComponent implements OnInit {
// variable to store rotation of view cube
public angle = {
x: 0,
y: 0,
z: 0
};
//change in angles
private delta_angle = {
x: 0,
y: 0,
z: 0
}
// default rotation on every click event
private rotation_angle = 45;
constructor() {
document.addEventListener('mousedown', this.rotate_click_events.bind(this), false);
}
ngOnInit() {
}
rotate_click_events(event: any) {
switch (event.target.className) {
case 'rotate-x-cw':
this.set_rotation(this.angle.x + this.rotation_angle, this.angle.y, this.angle.z);
break;
case 'rotate-x-acw':
this.set_rotation(this.angle.x - this.rotation_angle, this.angle.y, this.angle.z);
break;
case 'rotate-y-cw':
this.set_rotation(this.angle.x, this.angle.y + this.rotation_angle, this.angle.z);
break;
case 'rotate-y-acw':
this.set_rotation(this.angle.x, this.angle.y - this.rotation_angle, this.angle.z);
break;
case 'rotate-z-cw':
this.set_rotation(this.angle.x, this.angle.y, this.angle.z + this.rotation_angle);
break;
case 'rotate-z-acw':
this.set_rotation(this.angle.x, this.angle.y, this.angle.z - this.rotation_angle);
break;
default:
console.log(event.target.className);
break;
}
}
set_rotation(x: number, y: number, z: number ) {
//store old angle values
var old_angle = JSON.parse(JSON.stringify(this.angle));
// todo stabalize fast rotation
this.angle.x = x;
this.angle.y = y;
this.angle.z = z;
//store delta angle [new - old]
this.delta_angle.x = old_angle.x - this.angle.x;
this.delta_angle.y = old_angle.y - this.angle.y;
this.delta_angle.z = old_angle.z - this.angle.z;
//rotate
this.rotate_cube(this.angle);
//console.log(this.g_angle);
}
rotate_cube(_angle: any) {
let teg = document.getElementById("cube");
if (teg) {
teg.style.transform = "translateZ(-50px) rotateX(" + _angle.x + "deg) rotateY(" + _angle.y + "deg) rotateZ(" + _angle.z + "deg)";
}
}
}
父级组件
import {CubeViewWebGlComponent} from './cube-view-web-gl/cube-view-web-gl.component';
export class AppComponent implements AfterViewInit {
@ViewChild(CubeViewWebGlComponent) CubeView: CubeViewWebGlComponent;
ngAfterViewInit() {
private size_grid = 50;
private camera_pos = this.size_grid / 2;
private conversation: number[][] = [[0, -this.camera_pos], [this.camera_pos, -this.camera_pos], [this.camera_pos, 0],
[this.camera_pos, this.camera_pos], [0, this.camera_pos], [-this.camera_pos, this.camera_pos], [-this.camera_pos, 0], [-this.camera_pos, -this.camera_pos]]
setInterval(this.checkCubeAngle, 100);
checkCubeAngle = () => {
if ((this.CubeView.angle.x != this.angleCubeView.x) || (this.CubeView.angle.y != this.angleCubeView.y) || (this.CubeView.angle.z != this.angleCubeView.z)) {
this.getDiffAngle(this.angleCubeView.x - this.CubeView.angle.x, this.angleCubeView.y - this.CubeView.angle.y, this.angleCubeView.z - this.CubeView.angle.z);
this.angleCubeView.x = this.CubeView.angle.x;
this.angleCubeView.y = this.CubeView.angle.y;
this.angleCubeView.z = this.CubeView.angle.z;
this.changePositionCamera();
}
}
private getDiffAngle(_x: number, _y: number, _z: number) {
this.diffAngleCube.x = _x;
this.diffAngleCube.y = _y;
this.diffAngleCube.z = _z;
}
private getPositionCamera(): number[] {//normalize the camera position
var result: number[] = new Array(3);
var tmp: number;
for (var i = 0; i < 3; i++) {
if (i == 0) {
tmp = this.camera.position.x;
} else if (i == 1) {
tmp = this.camera.position.y;
} else if (i == 2) {
tmp = this.camera.position.z;
}
if ((tmp) <= ((-this.camera_pos) / 2)) {
result[i] = -this.camera_pos;
continue;
} else if ((tmp >= (-this.camera_pos / 2)) && (tmp <= (this.camera_pos / 2))) {
result[i] = 0;
continue;
} else if (tmp >= (this.camera_pos / 2)) {
result[i] = this.camera_pos;
continue;
}
}
return result;
}
private changePositionCamera() {
var cameraPosition = this.getPositionCamera();
//console.log(this.diffAngleCube);
if (this.diffAngleCube.y != 0) {
for (var i = 0; i < this.conversation.length; i++) {
if ((this.conversation[i][0] == cameraPosition[0]) && (this.conversation[i][1] == cameraPosition[2])) {
if (this.diffAngleCube.y > 0) {
if (++i >= this.conversation.length) i = 0;
} else if (this.diffAngleCube.y < 0) {
if (--i < 0) i = (this.conversation.length - 1);
}
this.camera.position.set(this.conversation[i][0], this.camera.position.y, this.conversation[i][1]);
//console.log(this.camera.position);
break;
}
}
} else if (this.diffAngleCube.x != 0) {
for (var i = 0; i < this.conversation.length; i++) {
if ((this.conversation[i][0] == cameraPosition[1]) && (this.conversation[i][1] == cameraPosition[2])) {
//console.log(i)
if (this.diffAngleCube.x > 0) {
if (++i >= this.conversation.length) i = 0;
} else if (this.diffAngleCube.x < 0) {
if (--i < 0) i = (this.conversation.length - 1);
}
this.camera.position.set(this.camera.position.x, this.conversation[i][0], this.conversation[i][1]);
break;
}
}
}
//console.log(this.camera.position)
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
}
}
我认为使用三角函数可以完成什么。无需划分区域。请在此处输入图片描述