效果:
代码:
<template>
<div>
<el-container>
<el-main>
<div class="box-card-left">
<div id="threejs" style="border: 1px solid red"></div>
<div class="box-right">
<el-button type="primary" @click="start">开始</el-button>
</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";
export default {
data() {
return {
value1: 0,
percentage: 20,
name: "",
scene: null,
camera: null,
renderer: null,
effectComposer: null,
mesh: null,
geometry: null,
group: null,
material: null,
texture: null,
position: null,
outlinePass: null,
clock: null,
mixer: null,
clip_action: null,
request_animation_frame: 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.clock = new this.$three.Clock();
// 创建场景对象
this.scene = new this.$three.Scene();
// 创建辅助坐标轴对象
const axesHelper = new this.$three.AxesHelper(150);
this.scene.add(axesHelper);
// 创建立方缓存几何体对象
this.geometry = new this.$three.BoxGeometry(50, 50, 50);
const geometry_1_position = new this.$three.BoxGeometry(50, 100, 50).attributes.position;
const geometry_2_position = new this.$three.BoxGeometry(10, 100, 10).attributes.position;
// 设置几何体变形目标数据(必须在 new this.$three.Mesh()之前设置,否则报错)
this.geometry.morphAttributes.position = [geometry_1_position, geometry_2_position];
// 创建材质对象
this.material = new this.$three.MeshBasicMaterial({ color: 0xbbdddd, wireframe: false });
// 创建网格对象
this.mesh = new this.$three.Mesh(this.geometry, this.material);
this.mesh.position.set(0, 0, 0);
this.scene.add(this.mesh);
// 创建相机对象
this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 2000);
this.camera.position.set(300, 50, 300);
this.camera.lookAt(this.mesh.position);
// 创建渲染器对象
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.mesh 的权重值
*/
start() {
// 给网格模型命名
this.mesh.name = 'box';
// 创建关键帧对象
const kf_1 = new this.$three.KeyframeTrack('box.morphTargetInfluences[0]',[0,2],[0,1]);
const kf_2 = new this.$three.KeyframeTrack('box.morphTargetInfluences[1]',[3,5],[0,1]);
// 创建关键帧动画对象
const clip = new this.$three.AnimationClip('test', 6, [kf_1, kf_2]);
// 创建播放器对象(参数:指定哪个模型有动画效果)
this.mixer = new this.$three.AnimationMixer(this.mesh);
// 调用播放器的 clipAction 剪辑方法,参数是 关键帧动画对象
const clipAction = this.mixer.clipAction(clip);
clipAction.play();
this.loop();
},
loop() {
this.renderer.render(this.scene, this.camera);
this.mixer.update(this.clock.getDelta());
window.requestAnimationFrame(this.loop);
}
},
};
</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>