效果：
<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right"></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";export default {data() {return {name: "",scene: null,camera: null,renderer: null,effectComposer: null,mesh: null,mesh1: null,geometry: null,group: null,material: null,texture: null,};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {// 1,创建场景对象this.scene = new this.$three.Scene();// 创建几何体this.createGeometry();this.createSphereGeometry();// 创建相机对象this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 1000);this.camera.position.set(40, 20, 40);this.camera.lookAt(0, 0, 0);// 创建渲染器对象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(1000, 800);// this.renderer.render(this.scene, this.camera);const axesHelper = new this.$three.AxesHelper(300);this.scene.add(axesHelper);// 创建外边框通道对象const outlinePass = new OutlinePass(new this.$three.Vector2(1000, 800),this.scene,this.camera);outlinePass.selectedObjects = [this.mesh, this.mesh1];console.log(outlinePass);// 外边框通道描边颜色设置outlinePass.visibleEdgeColor.set(0x2182F9);// 外边框通道描边厚度outlinePass.edgeThickness = 10;// 描边亮度outlinePass.edgeStrength = 10000.0;// 描边闪烁频率outlinePass.pulsePeriod = 1;// 创建渲染器通道对象const renderPass = new RenderPass(this.scene, this.camera);// 创建效果制作器对象this.effectComposer = new EffectComposer(this.renderer);/*** 必须先添加渲染通道对象，再添加外边框通道对象*/this.effectComposer.addPass(renderPass); // 必须先添加渲染通道对象this.effectComposer.addPass(outlinePass); // 再添加外边框通道对象this.effectComposer.render();window.document.getElementById("threejs").appendChild(this.renderer.domElement);const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.effectComposer.render();});this.renderFun();},// 创建十二面缓冲几何体createGeometry() {/*** 创建十二面缓冲几何体对象，* DodecahedronGeometry(radius, detail)* radius: 十二面体的半径；* detail: 默认值是0，设置为大于0的数将会为它增加一些顶点，不再是十二面体；* */const dodecahedronGeometry = new this.$three.DodecahedronGeometry(10);const material = new this.$three.MeshBasicMaterial({color: 0x14a88a,});this.mesh = new this.$three.Mesh(dodecahedronGeometry, material);this.scene.add(this.mesh);},// 创建球缓冲几何体createSphereGeometry() {// 创建球缓冲几何体对象const sphereGeometry = new this.$three.SphereGeometry(10, 102, 106);const material = new this.$three.MeshBasicMaterial({color: 0xffaadd,});this.mesh1 = new this.$three.Mesh(sphereGeometry, material);this.mesh1.translateZ(25);this.scene.add(this.mesh1);},renderFun() {this.effectComposer.render();requestAnimationFrame(this.renderFun);},},
};
</script>
//
<style lang="less" scoped>
.msg {padding: 20px;text-align: left;display: flex;justify-content: flex-start;flex-wrap: wrap;.span {margin: 0 30px 30px 0;// white-space: nowrap;}.p {text-align: left;}
}
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {text-align: left;padding: 10px;.xyz {width: 100px;margin-left: 20px;}.box-btn {margin-left: 20px;}}
}
</style>
)