效果：
<template><div><el-container><el-main><div class="box-card-left"><divid="threejs"style="border: 1px solid red; position: relative"></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 {CSS3DObject,CSS3DSprite,CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";export default {data() {return {name: "",scene: null,camera: null,renderer: null,css3DRenderer: null,effectComposer: null,mesh: null,geometry: null,group: null,material: null,texture: null,position: null,outlinePass: null,canvasWidth: 1000,canvasHeight: 800,color: [],meshArr: [],};},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(50);this.scene.add(axesHelper);// 形状缓冲几何体（ShapeGeometry）const pointers = [new this.$three.Vector2(0,0),new this.$three.Vector2(10,0),new this.$three.Vector2(0,10),]const shape = new this.$three.Shape(pointers);// 创建形状缓冲几何体对象，ShapeGeometry 只能是自定义二维的几何体，参数是Shape类型this.geometry = new this.$three.ShapeGeometry(shape);this.material = new this.$three.MeshBasicMaterial({color: 0xff99aa,side: this.$three.DoubleSide});this.mesh = new this.$three.Mesh(this.geometry, this.material);this.scene.add(this.mesh);// 创建盒模型对象const geometry = new this.$three.BoxGeometry(5,20,10);const boxMesh = new this.$three.Mesh(geometry, this.material);this.scene.add(boxMesh);// 创建textLoader加载器对象const textureLoader = new this.$three.TextureLoader();const texture = textureLoader.load('/img/threejs.jpeg')const spriteMaterial = new this.$three.SpriteMaterial({map: texture})// 创建精灵模型对象const sprite = new this.$three.Sprite(spriteMaterial);sprite.position.y += 12.2;sprite.scale.set(5,5,5);// 网格模型中添加精灵模型对象this.mesh.add(sprite);// 创建相机对象this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);this.camera.position.set(20,15,20);this.camera.lookAt(0,0,0);// 创建渲染器对象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", e => {this.renderer.render(this.scene, this.camera);})this.renderFun();},renderFun() {this.renderer.render(this.scene, this.camera);requestAnimationFrame(this.renderFun);}},
};
</script>
<style lang="less" scoped>
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;position: relative;width: 100%;.box-right {img {width: 500px;user-select: none;}}
}
</style>
