效果：

代碼：?

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs"></div><div>判斷的前提是兩個向量平行<el-button @click="judge">開始判斷</el-button>{{ textList }}</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 { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 發光描邊OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {CSS2DObject,CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import TWEEN from "@tweenjs/tween.js";
import {CSS3DObject,CSS3DSprite,CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
// TextGeometry 是一個附加組件，必須顯式導入。 three/examples/jsm/geometries
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
// FontLoader 是一個附加組件，必須顯式導入。
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
export default {data() {return {scene: null, // 場景對象camera: null, // 相機對象renderer: null, // 渲染器對象a: new this.$three.Vector3(10, 0, 0),b: new this.$three.Vector3(15, 0, 0),c: new this.$three.Vector3(-20, 0, 0),textList:[]};},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(60);this.scene.add(axesHelper);// 創建相機對象this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);this.camera.position.set(25,25,25);this.camera.lookAt(0,0,0);let arr = [this.a, this.b, this.c];arr.forEach((item,index) => {let color = null;let name = "";if(index == 0) {color = 0xffffff;name = "A";} else if (index == 1) {color = 0xffccff;name = "B";} else {color = 0xffffaa;name = "C";}this.createArrow(item, color,name);})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';window.document.getElementById("threejs").appendChild(this.css3DRenderer.domElement);// 創建渲染器對象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(1000,800);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();},createArrow(dir, color, name) {let arrow = new this.$three.ArrowHelper(dir.clone().normalize(), new this.$three.Vector3(0,0,0), dir.length(), color);arrow.name = name;this.scene.add(arrow);},renderFun() {this.css3DRenderer.render(this.scene, this.camera);requestAnimationFrame(this.renderFun); // 一定要設置這一句，否則，不渲染},judge() {let a = this.a.clone().normalize();let b = this.b.clone().normalize();let c = this.c.clone().normalize();let a_dot_b = a.clone().dot(b);let a_dot_c = a.clone().dot(c);let b_cos = Math.acos(a_dot_b);let c_cos = Math.acos(a_dot_c);let deg1 = this.$three.MathUtils.radToDeg(b_cos);let deg2 = this.$three.MathUtils.radToDeg(c_cos);this.textList = [];if(deg1 == 0) {this.textList.push('a和b同向');}if(deg2 == 180) {this.textList.push('a和c反向');}}},
};
</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>