效果:
<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,
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();
// 创建辅助坐标轴对象
const axesHelper = new this.$three.AxesHelper(100);
this.scene.add(axesHelper);
// 创建正交投影相机对象
this.camera = new this.$three.PerspectiveCamera(60,1,0.01,1000);
// 设置相机位置
this.camera.position.set(200,200,200);
// 设置相机指向
this.camera.lookAt(0,0,0);
// 创建WebGL渲染器对象
this.renderer = new this.$three.WebGLRenderer();
this.renderer.setSize(1000,800);
// this.renderer.render(this.scene, this.camera);
/**
* 渲染器通道 RenderPass 的作用是指定后处理对应的相机和场景
*/
// 创建渲染通道对象---参数是 场景、相机
const renderPass = new RenderPass(this.scene, this.camera);
// 创建发光描边通道 OutlinePass(v,scene,camera)
// v 像素,Vector2格式的
const outlinePass = new OutlinePass(new this.$three.Vector2(1000,800), this.scene, this.camera);
outlinePass.selectedObjects = [this.mesh];
/**
* 效果制作器的作用是指定了需要后处理对应的渲染器
*/
// 创建效果制作器对象---参数是WebGl渲染器
this.effectComposer = new EffectComposer(this.renderer);
// 效果制作器添加 渲染器通道
this.effectComposer.addPass(renderPass);
// 效果制作器添加 发光描边通道
this.effectComposer.addPass(outlinePass);
// 效果渲染器调用 render()方法进行渲染
this.effectComposer.render();
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();
})
},
// 创建几何体
createGeometry() {
/**
* 创建十二面缓冲几何体对象,
* DodecahedronGeometry(radius, detail)
* radius: 十二面体的半径;
* detail: 默认值是0,设置为大于0的数将会为它增加一些顶点,不再是十二面体;
* */
const dodecahedronGeometry = new this.$three.DodecahedronGeometry(80);
const material = new this.$three.MeshBasicMaterial({
color: 0x14A88A,
});
this.mesh = new this.$three.Mesh(dodecahedronGeometry, material);
this.scene.add(this.mesh);
},
renderFun() {
this.effectComposer.render();
requestAnimationFrame(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>