效果:这里只是 鼠标点击时,改变了精灵图的材质颜色
代码:
<template>
<div>
<el-container>
<el-main>
<div class="box-card-left">
<div id="threejs" style="border: 1px solid red"></div>
<div class="box-right" style="text-align: left; padding: 10px">
<img src="./zuobiao.png" alt="">
<img src="./zuobiao1.jpg" alt="">
</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,
position: null,
outlinePass: null,
canvasWidth: 1000,
canvasHeight: 800,
color: [],
meshArr: [],
numbers: Array.from({ length: 255 }, (_, i) => i)
};
},
created() {},
mounted() {
this.name = this.$route.query.name;
this.init();
},
methods: {
goBack() {
this.$router.go(-1);
},
// 随机颜色
randomColor() {
// 要生成min-max之间的随机数,公式为:Math.random()*(max-min+1)+min
let i = Math.floor(Math.random() * 255);
let j = Math.floor(Math.random() * 255);
let k = Math.floor(Math.random() * 255);
return new this.$three.Color(
"rgb(" +
i +
", " +
j +
", " +
k +
")"
);
},
// 随机颜位置
randomPosition() {
// 要生成min-max之间的随机数,公式为:Math.random()*(max-min+1)+min
let i = Math.floor(Math.random() * 230);
let j = Math.floor(Math.random() * 230);
let k = Math.floor(Math.random() * 230);
// return new this.$three.Vector3(i, j, k);
return {i, j, k};
},
init() {
// 创建场景对象
this.scene = new this.$three.Scene();
// 创建环境光对象
const ambientLight = new this.$three.AmbientLight(0xffffff);
this.scene.add(ambientLight);
// 创建坐标轴辅助对象
const axesHelper = new this.$three.AxesHelper(500);
this.scene.add(axesHelper);
// 调用平面缓冲几何体方法
this.planeGeometryFn();
// 创建TextureLoader加载器对象
const textureLoader = new this.$three.TextureLoader().load(require("../../assets/twelve/tree.png"));
// 创建精灵材质对象
const spriteMaterial = new this.$three.SpriteMaterial({
transparent: true,
map: textureLoader
})
// 创建组对象
this.group = new this.$three.Group();
// 创建精灵对象
for(let i = 0, j = 18; i < j; i++) {
let flag = i % 2 == 0 ? 1 : -1;
// 创建精灵模型对象
const sprite = new this.$three.Sprite(spriteMaterial);
// 设置精灵图位置
sprite.position.set(flag * this.randomPosition().i, 0, -flag * this.randomPosition().k);
sprite.scale.set(150,150,1); // 设置精灵图缩放
sprite.translateY(75); // 沿y轴正方向移动 75
this.group.add(sprite);
}
// 场景中添加组对象
this.scene.add(this.group);
// 创建相机对象
this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
this.camera.position.set(500,500,600); // 设置相机位置
this.camera.lookAt(0,0,0); // 设置相机指向
// 创建渲染器对象
this.renderer = new this.$three.WebGLRenderer();
setTimeout(() =>{
this.renderer.setSize(1000,800);
this.renderer.render(this.scene, this.camera);
window.document.getElementById("threejs").appendChild(this.renderer.domElement);
this.outlinePassFn();
},500)
// 创建相机空间轨道控制器
const controls = new OrbitControls(this.camera, this.renderer.domElement);
controls.addEventListener("change", () => {
this.renderer.render(this.scene, this.camera);
})
},
// 创建平面缓冲几何体的方法
planeGeometryFn() {
// 创建平面缓冲几何体对象
const planeGeometry = new this.$three.PlaneGeometry(800,800);
// 创建网格材质对象
const material = new this.$three.MeshBasicMaterial({
color: 0x98CEF3,
side: this.$three.DoubleSide
});
// 创建网格对象
const mesh = new this.$three.Mesh(planeGeometry, material);
mesh.rotateX(Math.PI / 2); // 模型旋转90度
this.scene.add(mesh);
},
// 创建 射线拾取Sprite控制场景的方法
spritControls() {
document.getElementById("threejs").addEventListener("click", e => {
// 1,先进行坐标转换
let px = e.offsetX;
let py = e.offsetY;
let x = (px / 1000) * 2 - 1;
let y = -(py / 800) * 2 + 1;
// 创建射线投射器对象
const raycaster = new this.$three.Raycaster();
// 计算射线 setFromCamera
raycaster.setFromCamera(new this.$three.Vector2(x, y), this.camera);
// 射线交叉计算
let intersect = raycaster.intersectObjects(this.group.children);
if(intersect.length > 0) {
intersect[0].object.material.color.copy(this.randomColor());
this.renderer.render(this.scene, this.camera);
}
})
},
// 创建发光描边的方法
outlinePassFn() {
// 创建后处理对象
this.effectComposer = new EffectComposer(this.renderer);
// 创建渲染器通道对象
const renderPass = new RenderPass(this.scene, this.camera);
this.effectComposer.addPass(renderPass);
// 创建发光描边通道对象
this.outlinePass = new OutlinePass(new this.$three.Vector2(1000, 800), this.scene, this.camera);
this.outlinePass.visibleEdgeColor.set(0xffddaa);
this.outlinePass.edgeThickness = 5;
this.outlinePass.pulsePriod = 2;
this.effectComposer.addPass(this.outlinePass);
this.spritControls();
},
renderFun() {
if(this.effectComposer) {
this.effectComposer.render();
}
window.requestAnimationFrame(this.renderFun);
}
},
};
</script>
//
<style lang="less" scoped>
.box-card-left {
display: flex;
align-items: flex-start;
flex-direction: row;
width: 100%;
.box-right {
img{
width:500px;
}
}
}
</style>