文章目录
前言
代码地址 ： https://gitee.com/txcst/3-dmap.git 只想好好做开源。
上一期我们已经把精灵(sprite)和模型引入进来了，这一期主要使用射线 去捕捉几何体，产生一些交互，顺便添加一张背景图片
一、如何与模型产生交互
光线投射Raycaster：主要用于在三维物体中拾取几何体，你可以把他当做一把枪，鼠标按下的时候就是扣下了扳机。发射出一颗子弹打穿你场景里的所有几何体并呈现给你
setRaycaster() {
let onMouseMove = (event) => {
var Sx = event.clientX; //鼠标单击位置横坐标
var Sy = event.clientY; //鼠标单击位置纵坐标
//屏幕坐标转WebGL标准设备坐标
var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
//创建一个射线投射器`Raycaster`
var raycaster = new THREE.Raycaster();
//通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
//返回.intersectObjects()参数中射线选中的网格模型对象
// 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
//加上true 代表遍历子元素
var intersects = raycaster.intersectObjects(scene.children, true);
// intersects.length大于0说明，说明选中了模型
if (intersects.length > 0) {
}
};
// document.addEventListener('click', onMouseMove, false)
document
.getElementsByTagName("canvas")[0]
.addEventListener("click", onMouseMove, false);
},
intersects[0].object 就代表着你射线透射穿透的第一个模型
接下来我们给我们要找的几何体加一个标识，好让我们去识别到它
让我们回到 getSpiritAndGltf函数，
在生成兵马俑的精灵的时候 给他添加上name，叫做 bingmayong
let sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(item.arr[0][0], item.arr[0][1], 8);
sprite.scale.set(8, 8, 8);
sprite.name = "bingmayong";
在setRaycaster方法 射线中找到名字叫bingmayong的 sprite
var intersects = raycaster.intersectObjects(scene.children, true);
// intersects.length大于0说明，说明选中了模型
if (intersects.length > 0) {
//由于我的sprite 前面没有几何体 所以第一个就是他 如果你想找的几何体有遮挡，你可以使用find方法
if (intersects[0].object.name == 'bingmayong') {
console.log('点击了 bingmayong')
}
}
点击的效果已经出来了
二、使用Canvas贴图
1.随便创建一个画布贴图，绑定一个平面几何体，并让这个几何体隐藏起来
visible属性决定了几何体的显示和隐藏
//创建canvans贴图
getCanvas() {
canvas = document.createElement("canvas");
canvas.width = 195
canvas.height = 130
//创建canvas贴图
let canvasTexture = new THREE.CanvasTexture(canvas);
let material = new THREE.MeshBasicMaterial({ map: canvasTexture });
//创建平面几何体
let planeGeometry = new THREE.PlaneGeometry(20, 21);
//创建网格对象
canvasPlane = new THREE.Mesh(planeGeometry, material);
canvasPlane.position.set(0, 0, -20)
canvasPlane.rotation.x = -5.5;
//隐藏
canvasPlane.visible = false
map.add(canvasPlane);
},
接下来的逻辑 ，当点到bingmayong的sprite时 把兵马俑的资料和位置传递出来，修改几何体 planeGeometry 的位置和canvas贴图 并让他显示
point属性代表着 当前点击的对象的位置
if (intersects[0].object.name == 'bingmayong') {
// console.log('点击了 bingmayong')
let bmyText = '兵马俑，亦简称秦兵马俑或秦俑，是第一批全国重点文物保护单位、第一批中国世界遗产，位于今陕西省西安市临潼区秦始皇陵以东1.5千米处的兵马俑坑内。'
this.setCanvas(bmyText, [intersects[0].point.x, intersects[0].point.y])
}
获取canvas的上下文对象
setCanvas(text, position) {
let ctx = canvas.getContext('2d')
this.drawText(text, ctx, position)
},
接下里就是根据传的资料 画新的贴图并且修改位置
因为canvas不支持换行，所以要计算一下字符长度 并手动换行
drawText(text, ctx, position) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个canvas
// 设置背景颜色为蓝色
ctx.fillStyle = '#36FFFF';
// 绘制一个矩形，该矩形的背景颜色为前面设置的蓝色
ctx.fillRect(0, 0, 200, 130);
let promise = new Promise(function (resolve, reject) {
ctx.font = "15px Arial";
ctx.fillStyle = "#000000";
var lineWidth = 200; // 每行文本的最大宽度，可根据实际需求进行调整
var lineHeight = 20; // 每行文本的高度差值，可根据实际需求进行调整
var x = 10; // 文本起始位置的x坐标，可根据实际需求进行调整
var y = 20; // 文本起始位置的y坐标，可根据实际需求进行调整
var lineCount = 0; // 当前行数，用于控制换行次数，可根据实际需求进行调整
for (var i = 0; i < text.length; i++) {
var charWidth = ctx.measureText(text[i]).width; // 当前字符的宽度，用于判断是否需要换行，并计算该字符占用空间的大小
if (x + charWidth > lineWidth) { // 如果当前字符无法容纳在当前行中，需要换行并增加一行的高度差值（即多增加一行）
x = 10; // 重置x坐标，开始新的一行，即从下一行的起始位置开始重新绘制字符（相当于清空当前行的绘制）
y += lineHeight; // 增加一行的高度差值
lineCount++; // 增加一行数
}
ctx.fillText(text[i], x, y); // 绘制当前字符
x += charWidth; // 更新x坐标，准备绘制下一个字符
}
resolve('成功')
});
promise.then(res => {
//从新创建一个canvas贴图
let canvasTexture = new THREE.CanvasTexture(canvas);
let newMaterial = new THREE.MeshBasicMaterial({ map: canvasTexture });
//替换掉贴图
canvasPlane.material = newMaterial
//显示
canvasPlane.visible = true
//根据传过来的位置，给几何体从新定位
canvasPlane.position.set(...position, 14)
})
},
现在的效果就算初步完成了 ，然后我们再给故宫的模型加上判断
如果点击到别的地方没有识别到物体 就让canvas隐藏
if (intersects.length > 0) {
if (intersects[0].object.name == 'bingmayong') {
// console.log('点击了 bingmayong')
let bmyText = '兵马俑，亦简称秦兵马俑或秦俑，是第一批全国重点文物保护单位、第一批中国世界遗产，位于今陕西省西安市临潼区秦始皇陵以东1.5千米处的兵马俑坑内。'
this.setCanvas(bmyText, [intersects[0].point.x, intersects[0].point.y])
} else if (intersects[0].object.name.includes('Object')) {
let ggText = '故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。它占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座。'
this.setCanvas(ggText, [intersects[0].point.x, intersects[0].point.y])
} else {
canvasPlane.visible = false
}
}
我们再给他 加上一个背景图
getScene() {
scene = new THREE.Scene();
//设置背景
new THREE.TextureLoader().load("/data/sceneBack.png",(texture)=>{
scene.background = texture
});
},
背景图会受到双通道渲染的影响，导致发光 ，这里需要从写一下render方法，在渲染的时候把背景筛出来
render() {
scene.traverse((obj) => {
if ( obj instanceof THREE.Scene) {
this.materials = obj.background
obj.background = null
}
if (bloomLayer.test(obj.layers) === false) {
materials[obj.uuid] = obj.material;
obj.material = darkMaterial;
}
});
bloomComposer.render();
scene.traverse((obj) => {
if (materials[obj.uuid]) {
obj.material = materials[obj.uuid];
delete materials[obj.uuid];
}
if (obj instanceof THREE.Scene) {
obj.background = this.materials
delete this.materials
}
});
finalComposer.render();
},
最终效果
额 感觉有点丑…暂时还没想好样式，先这样把 主要是鼠标点击几何体的一个交互
总结
提示：这里对文章进行总结：
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
