class WebGLCoordinateAxis {
constructor(renderer) {
this.renderer = renderer;
this.sceneAxis = new THREE.Scene();
this.cameraAxis = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 20);
this.cameraAxis.up.set(0, 0, 1);
this.cameraAxis.position.set(0, 0, 10);
this.cameraAxis.updateProjectionMatrix();
this.group = new THREE.Group();
this.viewport = new THREE.Vector4();
this.oldClearColor = new THREE.Color();
this.initFont = false;
this.init();
}
init() {
let axisX = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.01, 0.01), new THREE.MeshBasicMaterial({ color: 0xff0000,depthTest: false}));
axisX.translateX(0.25);
let axisY = new THREE.Mesh(new THREE.BoxBufferGeometry(0.01, 0.5, 0.01), new THREE.MeshBasicMaterial({ color: 0x00ff00,depthTest: false }));
axisY.translateY(0.25);
let axisZ = new THREE.Mesh(new THREE.BoxBufferGeometry(0.01, 0.01, 0.5), new THREE.MeshBasicMaterial({ color: 0x0000ff,depthTest: false }));
axisZ.translateZ(0.25);
this.group.add(axisX);
this.group.add(axisY);
this.group.add(axisZ);
this.group.matrixAutoUpdate = false;
this.sceneAxis.add(this.group);
}
createText(text, size, color, position) {
//创建geomemory
let textGeo = new THREE.TextBufferGeometry(text, {
font: this.font,
size: size,
height: 0.02,
curveSegments: 4,
bevelThickness: 0,
bevelSize: 0,
bevelEnabled: false
});
textGeo.computeBoundingBox();
textGeo.computeVertexNormals();
let material = new THREE.MeshBasicMaterial({ color: color, flatShading: true, depthTest: false });
let textMesh = new THREE.Mesh(textGeo, material);
textMesh.rotateX(Math.PI * 0.5);
textMesh.position.copy(position);
return textMesh;
}
update(camera) {
let fontJson = ResourceManager.fontMap['font'];
if (!this.initFont && fontJson != undefined) {
this.font = new THREE.Font(fontJson);
this.group.add(this.createText('X', 0.1, 0xff0000, new THREE.Vector3(0.5, 0, 0)));
this.group.add(this.createText('Y', 0.1, 0x00ff00, new THREE.Vector3(0, 0.5, 0)));
this.group.add(this.createText('Z', 0.1, 0x0000ff, new THREE.Vector3(0, 0, 0.5)));
this.initFont = true;
}
this.oldClearColor.copy(this.renderer.getClearColor());
let oldClearAlpha = this.renderer.getClearAlpha();
let oldAutoClear = this.renderer.autoClear;
this.renderer.autoClear = false;
this.renderer.setClearColor(new THREE.Color(0, 0, 0), 0);
this.renderer.getCurrentViewport(this.viewport);
this.group.matrix.extractRotation(camera.matrixWorldInverse);
this.renderer.setViewport(400, 0, 200, 200)
this.renderer.render(this.sceneAxis, this.cameraAxis);
this.renderer.setViewport(this.viewport.x, this.viewport.y, this.viewport.z, this.viewport.w);
this.renderer.setClearColor(this.oldClearColor);
this.renderer.setClearAlpha(oldClearAlpha);
this.renderer.autoClear = oldAutoClear;
}
}
three.js 添加坐标轴
最新推荐文章于 2024-08-15 17:41:57 发布