threejs实现一个固定大小的3d标点

原创已于 2023-05-23 17:50:34 修改 · 2.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#3d

于 2022-05-30 15:14:27 首次发布

threejs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Three.js中解决3D模型标注随视角缩放问题，通过创建Mark类，继承自Object3D并重写updateMatrixWorld方法，固定模型缩放以保持标注清晰。关键步骤包括理解MVP矩阵、修改Model矩阵的缩放和使用自定义Mark对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景

需要在3d模型上实现标注的功能，一开始是直接通过添加一个普通的mesh来实现的，但是这样就会有一个问题-当视图缩放的时候，标注也会跟着一起放大缩小，影响视觉效果，因此需要实现一个不会随着视图一起放大或者缩小的mesh

在这里插入图片描述

实现思路

明确方向

根据需求，可以知道我们其实需要实现的就是更改模型渲染的默认方式，而模型的渲染是由模型的MVP三个矩阵来决定的
再进一步分析MVP三个矩阵，Model矩阵决定模型的旋转、缩放和位移，View决定相机的变换， Projection决定模型最终到屏幕的输出。根据需求，我们只需要修改Model矩阵当中的缩放就可以了。

具体实现

查看threejs的源码可知， scene中的Mesh都是继承自Object3D这个基类的，其中的matrixWorld属性就对应着我们上面提到的Model矩阵，因此只要我们能正确的更改这个矩阵应该就能实现我们想要的效果了。
那么如何更改这个matrixWorld呢？那就是updateMatrixWorld这个方法了。我们只需要在这个方法里面提取出Model矩阵中的缩放因子并去除就可以了
因为涉及到了更改Object3D源码，因此我们可以实现一个新的类Mark，让它继承自Object3D，再改写其中的一些方法就可以了
代码—

import { Mesh, Object3D, Quaternion, Vector3 } from 'three';

class Mark extends Object3D {
    constructor(camera, position) {
        super();
        this.type = 'Mark';
        this.camera = camera;
        this._position = position || new Vector3();
        this.size = 1;

        this.worldPosition = new Vector3();
        this._worldQuaternion = new Quaternion();
        this._worldScale = new Vector3();

        this.cameraPosition = new Vector3();
        this._cameraQuaternion = new Quaternion();
        this._cameraScale = new Vector3();

        this.add(this.setupBall())
    }

    setupBall() {
        const group = new THREE.Group();
        const bar = new Mesh(
            new THREE.CylinderGeometry(0.1, 0, 2, 20, 4),
            new THREE.MeshBasicMaterial({color: 'red'})
        )
        bar.position.setY(1)
        const ball = new Mesh(
            new THREE.SphereBufferGeometry(0.6, 20, 20),
            new THREE.MeshBasicMaterial({color: 'red'})
         )
        ball.position.setY(2)
        group.add(bar)
        group.add(ball)
        return group
    }

	// override `updateMatrixWorld`
    updateMatrixWorld( force ) {
        this.matrixWorld.decompose( this.worldPosition, this._worldQuaternion, this._worldScale );
        this.camera.updateMatrixWorld();
        this.camera.matrixWorld.decompose( this.cameraPosition, this._cameraQuaternion, this._cameraScale );

        const factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 10 );
        this.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 40);
        super.updateMatrixWorld( this );
    }

}

Mark.prototype.isMark = true;

export { Mark };

使用

// 使用
function addMark(direction, position, parent) {
    const axis = new THREE.Vector3(0, 1, 0);
    const mark = new Mark(camera, position);
    const positionLocal = parent.worldToLocal(position);
    mark.quaternion.setFromUnitVectors(axis, direction.clone().normalize());
    mark.position.copy(positionLocal);
    parent.add(mark);
}