这里假设已经了解threejs中基本的三要素等基础知识
如题，前戏不多，直接提枪上阵
第一步： 创建一个vue-cli项目
按照vue-cli官网方式创建 , 这里话不多说，不需要过多设置，能运行起来就欧克（当然是vue2.x）。
第二步： 安装threejs插件
完全可以按照threejs官网的教程安装
注意：如果打开为英文状态，可以在左上角那个地方点击en，切换成中文
image.png
第三步： 初始项目展示页面
安装完成之后，运行项目， 当然没什么屌变化，还是初始界面。
所以现在以组件的形式继续实现标题内容。
这里只在vue-cli中运行threejs，所以不安装其他插件，干扰视线
image.png
上图是目录结构，下面的代码内容主要是在ThreeJs组件中实现。所以，目前主要是先把测试ThreeJs是否能正常引入并展示。（PS： 按照HelloWorld组件的方式，基本上不会出错）
App.vue中的代码：
image.png
ThreeJs中的代码:
image.png
到目前为止，基本上页面上会展示 hello-threejs
image.png
第四步：开始在ThreeJS组件中，实现threejs的舞台
- 初始化舞台，
ThreeJs组件
到这里，基本上你会看到一个白色的地的空白页面，因为还没有往画布里面添加内容
- 添加形状以及文字
在data中添加
data(){
return{
...,
planArr: [
{ x: -3, y: 3, name: '第一块区域' },
{ x: 3, y: 3, name: '第二块区域'},
{ x: -3, y: -3, name: '第三块区域' },
{ x: 3, y: -3, name: '第四块区域' }
]
}
}
在methods方法中添加
methods: {
...,
initMain(){
// 这个是已经有的方法，
// 只是需要在这里调用一下创建几何体的方法
...,
// 添加形状
this.createCube()
},
geometry(width, height, depth){
return new THREE.BoxGeometry(width, height, depth)
},
createCube(){
for(let i = 0; i < this.planArr.length; i++){
// 添加几何体
const material = new THREE.MeshPhongMaterial({
color: 0x8aff58
})
const cube = new THREE.Mesh(this.geometry(5, 5, .001), material);
this.scene.add(cube);
// 添加名称
cube.name = this.planArr[i].name
// 设置几何模型形变
cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
}
},
}
到这里，你会看到下面的效果图：
image.png
- 添加鼠标划过方块以及点击方块时的事件
同样首先在data中添加数据
data(){
return{
...,
events: {
raycaster: new THREE.Raycaster(),
pickedObject: null,
pickedObjectSavedColor: 0,
pickPosition: { x: 0, y: 0 }
},
}
}
在methods中添加方法
methods: {
...,
// 点击当前坐标
clickPickPosition(){
this.pickEvents(this.events.pickPosition, this.scene, this.camera, obj=>{
obj.userData.checked = !obj.userData.checked;
// alert(`您选中了--${obj.name}`)
if(!obj.userData.checked){
obj.material.color.setHex(0x8aff58)
alert(`您已经取消选中--${obj.name}`)
}else{
obj.material.color.setHex(0xFFFF00)
alert(`您选中了--${obj.name}`)
}
})
},
// 获取当前焦点坐标
setPickPosition(event){
const pos = this.getCanvasRelativePosition(event);
this.events.pickPosition.x = (pos.x / this.canvas.width) * 2 - 1;
this.events.pickPosition.y = (pos.y / this.canvas.height) * -2 + 1;
this.pickEvents(this.events.pickPosition, this.scene, this.camera)
},
// 获取当前事件焦点坐标所在位置
getCanvasRelativePosition(event){
const rect = this.canvas.getBoundingClientRect();
return {
x: (event.clientX - rect.left) * this.canvas.width / rect.width,
y: (event.clientY - rect.top) * this.canvas.height / rect.height
}
},
// 添加鼠标划过以及点击事件
clickEvents(){
window.addEventListener('click', this.clickPickPosition);
window.addEventListener('mousemove', this.setPickPosition);
},
// 创建点击事件(默认是离摄像头最近的相交)
pickEvents(normalizedPosition, scene, camera, callback){
// 如果存在拾取的对象，则恢复颜色
if(this.events.pickedObject){
this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
this.events.pickedObject = undefined;
}
// 沿着摄像头的方向投射射线
this.events.raycaster.setFromCamera(normalizedPosition, camera)
// 获取与射线光线相交的对象列表
const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
if(intersectedObjects.length){
// 获取与射线光纤相交的第一个对象。也是最近的一个
this.events.pickedObject = intersectedObjects[0].object;
// 保存当前对象的颜色
this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
// 将其发射颜色设置为闪烁的红色/黄色
this.events.pickedObject.material.emissive.setHex(0xFFFF00)
if(callback){
callback(this.events.pickedObject)
}
}
},
}
在methods的initMain方法中调用一下鼠标点击事件
methods: {
initMain(){
...,
this.clickEvents();
}
}
至此，基本上已经完全实现效果： 鼠标滑过几何体变成黄色，点击几何体变成黄色
完整版代码中添加了文字
ThreeJS.vue完整版代码：
最终展示效果：
鼠标划过
第一次点击选中几何体
第二次点击取消选中几何体