import * as THREE from 'three';
import { Object3D } from 'three';
import * as TrackballControls from 'three-trackballcontrols';
public textLabels = [];
draw3DAxes() {
const dir1 = new THREE.Vector3( 1, 0, 0 );
const dir2 = new THREE.Vector3( 0, 1, 0 );
const dir3 = new THREE.Vector3( 0, 0, 1 );
const origin = new THREE.Vector3( 0, 0, 0 );
const length = 70;
const hex = 0x000000;
const headLength = 6;
const headWidth = 1.5;
const arrowHelper1 = new THREE.ArrowHelper( dir1, origin, length, hex, headLength, headWidth );
const arrowHelper2 = new THREE.ArrowHelper( dir2, origin, length, hex, headLength, headWidth );
const arrowHelper3 = new THREE.ArrowHelper( dir3, origin, length, hex, headLength, headWidth );
this.scene.add( arrowHelper1 );
this.scene.add( arrowHelper2 );
this.scene.add( arrowHelper3 );
}
setText(text, size, posX, posY, posZ, weight = .01): void {
const loader = new THREE.FontLoader();
loader.load('assets/fonts/helvetiker_regular.typeface.json', (font) => {
const geometry = new THREE.TextGeometry( text, {
font,
size,
height: .3,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.015,
bevelSize: weight,
bevelSegments: 5,
});
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
}));
geometry.computeBoundingBox();
geometry.boundingBox.getCenter(mesh.position).multiplyScalar(0);
geometry.applyMatrix( new THREE.Matrix4().makeTranslation( posX, posY, posZ ));
this.scene.add(mesh);
this.textLabels.push(mesh);
});
}
render() {
this.controls.update();
requestAnimationFrame(() => {
this.render();
this.textLabels.map(mesh => mesh.quaternion.copy(this.camera.quaternion));
});
this.renderer.render(this.scene, this.camera);
}
this.draw3DAxes();
this.setText('Hello Honey', 2, -5, 72, 7);
window.addEventListener('DOMContentLoaded', () => this.render());
на "3D сцене" много текстовых меток (вот таких как выше в примере) Проблема: при использовании строки
this.textLabels.map(mesh => mesh.quaternion.copy(this.camera.quaternion));
текст поворачивается на камеру но открепляется от 3D сцены (появляется отдельная "2D сцена" текстовых меток) а без этой строки текст является частью сцены и перемещается вместе с ней (вращение, зум и прочее) НО не поворачивается на камеру. Нужно не открепляя текст от 3D сцены поворачивать его все время "лицом" на камеру.
mesh.position.set(posX, posY, posZ)
, применяется матрица трансляции к геометрии?