效果：

代码：

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs"></div>
          <div style="padding: 10px;text-align: left;">
            叉乘判断物体在人左前、右前还是左后，右后方向
            <div style="margin: 10px;">
              <el-button @click="judge">开始判断</el-button>
              <div v-for="(item,index) in this.positon_arr" :key="index" style="line-height: 28px;">{{ item }}</div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import {
  CSS3DSprite,
  CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
export default {
  data() {
    return {
      scene: null, // 场景对象
      camera: null, // 相机对象
      group: null, // 组对象
      person: null, // 人对象
      renderer: null, // 渲染器对象
      css3DRenderer: null, // 渲染器对象
      a: new this.$three.Vector3(0, 0, 1),
      // b: new this.$three.Vector3(30, 0, 30),
      meshPosition:[],
      positon_arr:[],

    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 如何判断物体是在人的前方还是后方
     * 思路：借助两个单位向量的点乘结果来判断的；
     */
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      // 创建辅助坐标轴对象
      const axesHelper = new this.$three.AxesHelper(10);
      this.scene.add(axesHelper);
      // 创建环境光对象
      const ambientLight = new this.$three.AmbientLight(0xffffff, 10);
      this.scene.add(ambientLight);
      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(-4,5,-5);
      this.camera.lookAt(0,0,0);

      this.css3DRenderer = new CSS3DRenderer();
      this.css3DRenderer.setSize(1000,800);
      this.css3DRenderer.render(this.scene, this.camera);
      this.css3DRenderer.domElement.style.position = 'absolute';
      this.css3DRenderer.domElement.style.top = 0;
      this.css3DRenderer.domElement.style.pointerEvents = 'none';

      this.css3DRenderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.css3DRenderer.domElement);

      this.createMesh(0xffaadd, new this.$three.Vector3(3,0,3), '球1');
      this.createMesh(0xddcc11, new this.$three.Vector3(-3,0,3), '球2');
      this.createMesh(0x1199dd, new this.$three.Vector3(3,0,-3), '球3');
      this.createMesh(0xbbaadd, new this.$three.Vector3(-3,0,-3), '球4');
      
      this.createArrow(this.a);

      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      // 创建gltfLoader加载器对象
      const gltfLoader = new GLTFLoader();
      gltfLoader.load("/models/gltf/person2/scene.gltf", gltf => {
        console.log(gltf);
        gltf.scene.children[0].scale.set(2,2,2);
        this.scene.add(gltf.scene);
        this.renderer.render(this.scene, this.camera);
        window.document.getElementById("threejs").appendChild(this.renderer.domElement);
        const controls = new OrbitControls(this.camera, this.renderer.domElement);
        controls.addEventListener("change", () => {
          this.renderer.render(this.scene, this.camera);
        })
        this.renderFun();
      })
    },
    // 创建箭头用于显示人前方的单位向量 this.a
    createArrow(dir, l=2, color=0xffffff) {
      let arrow = new this.$three.ArrowHelper(dir, new this.$three.Vector3(0,0,0), l, color);
      this.scene.add(arrow);
    },
    // 创建模型的方法
    createMesh(color, position, name) {
      // 创建球缓冲几何体
      const geometry = new this.$three.SphereGeometry(1,32,16);
      // 创建材质对象
      const material = new this.$three.MeshBasicMaterial({color: color});
      const mesh = new this.$three.Mesh(geometry, material);
      mesh.name = name;
      mesh.position.set(position.x, position.y, position.z);
      this.meshPosition.push({name: name, position: mesh.position});
      let dom = this.createDom(name);
      mesh.add(dom);
      this.scene.add(mesh);
      this.createArrow(mesh.position, mesh.position.length()*0.7,color);
    },
    createDom(name) {
      let dom = document.createElement("div");
      dom.innerText = name;
      let css3DObject = new CSS3DSprite(dom);
      css3DObject.scale.set(0.03,0.03,0.03);
      return css3DObject;
    },
    renderFun() {
      this.css3DRenderer.render(this.scene, this.camera);
      requestAnimationFrame(this.renderFun); // 一定要设置这一句，否则，不渲染
    },
    /**
     * 人前方的单位向量a 与 物体到原点的向量m 叉乘后，
     * 可以通过叉乘结果的y值判断物体是在人左侧还是右侧
     * 
     */
    judge() {
      if(this.meshPosition) {
        this.positon_arr = [];
        this.meshPosition.forEach(item => {
          let c = this.a.clone().cross(item.position);
          let p_str = "";
          if(c.y > 0) {
            p_str += item.name +"在人左";
            p_str += this.dotDeg(item.position);
          } else {
            p_str += item.name +"在人右";
            p_str += this.dotDeg(item.position);
          }
          this.positon_arr.push(p_str);
        })
      }
    },
    // 点乘判断两个向量的夹角
    dotDeg(meshPosition) {
      let c = this.a.clone().dot(meshPosition.clone().normalize());
      let cos = Math.acos(c);
      let deg = this.$three.MathUtils.radToDeg(cos);
      console.log(deg);
      let pos = "";
      if(deg > 0 && deg < 90) {
        pos = "前";
      } else if (deg == 90) {
        pos = "平行";
      } else {
        pos = "后";
      }
      return pos;
    }
  },
};
</script>
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>