用鼠标在屏幕中拾取/选取对象
1.demo效果
如上图,该demo实现鼠标可以在屏幕中选取球体、圆柱或方块,点击时改变其透明度。若勾选showRay属性。鼠标滑过对象时出现模拟投射射线的红色线条
2.知识要点
2.1 光线投射对象Raycaster
该对象用于在三维空间中选取某个对象。其原理是从某一点发射一条射线。如果这条射线穿过一个对象。那么就会选中这个对象。
2.1.1 创建光线投射对象
创建光投射对象通过new THREE.Raycaster(origin, direction, near, far)
语句创建。其参数说明如下:
- origin -光线投射的原点,Vector3类型。
- direction -射线的方向,Vector3类型。
- near -投射近点,不能为负值,应该小于far,其默认值为0
- far -投射远点,不能小于near,其默认值为无穷大
关于参数near和far做一下特别说明:如下图如果选取对象在射线选取范围内才可以被选中,
2.1.2获取射线交叉对象
创建的光线投射对象有一个intersectObject()方法用来获取射线交叉的对象,使用方法如下
const raycaster = new THREE.Raycaster(origin, direction, near, far)
const arr= raycaster.intersectObjects(object, recursive, optionalTarget)
raycaster.intersectObjects()参数
- object-要检查的是否与射线相交的对象,Object3D类型。
- recursive-是否检查所有后代,可选默认为false,Boolean类型。
- optionalTarget-可选参数,放置结果的目标数组。Array类型。
若使用这个参数返回检查结果则在每次调用之前必须清空这个数组
raycaster.intersectObjects()的返回值
- distance -射线投射原点和相交部分之间的距离。
- point -相交部分的坐标。
- face -相交的面。
- faceIndex -相交的面的索引。
- object -相交的物体。
- uv -相交部分的点的UV坐标。
使用示例
//示例1-射线只检查指定的成员-球体、圆柱、方块
const intersects = raycaster.intersectObjects([
this.sphere,
this.cylinder,
this.cube
])
//示例2-射线检查所有指定对象的后代
const intersects = raycaster.intersectObjects(this.scene.children, true)
// 设置选中对象透明度为0.1
if (intersects.length > 0) {
intersects[0].object.material.transparent = true
intersects[0].object.material.opacity = 0.1
}
3.实现要点
3.1 添加鼠标点击和悬浮监听事件
mounted() {
document.addEventListener('mousedown', this.onDocumentMouseDown, false)
document.addEventListener('mousemove', this.onDocumentMouseMove, false)
}
3.2 屏幕坐标系转换为three.js 坐标系
//屏幕坐标系转换为three.js坐标系
let vector = new THREE.Vector3(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
)
3.3 创建光线投射对象获取选取对象
// 创建光线投射对象
const raycaster = new THREE.Raycaster(
this.camera.position,
vector.sub(this.camera.position).normalize()
)
//射线只检查指定的成员-球体、圆柱、方块
const intersects = raycaster.intersectObjects([
this.sphere,
this.cylinder,
this.cube
])
3.4 选中对象处理
// 设置选中对象透明度为0.1
if (intersects.length > 0) {
intersects[0].object.material.transparent = true
intersects[0].object.material.opacity = 0.1
}
// 创建模拟射线
if (intersects.length > 0) {
const points = []
// 创建模拟射线的起点和终点
points.push(new THREE.Vector3(-30, 39.8, 30))
points.push(intersects[0].point)
const mat = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true,
opacity: 0.6
})
//创建管道几何体模拟射线
const tubeGeometry = new THREE.TubeGeometry(
new THREE.CatmullRomCurve3(points),
60,
0.001
)
if (this.tube) this.scene.remove(this.tube)
if (this.properties.showRay) {
//创建模拟射线的对象并添加到场景
this.tube = new THREE.Mesh(tubeGeometry, mat)
this.scene.add(this.tube)
}
}
4.demo代码
<template>
<div>
<div id="container"></div>
<div class="controls-box">
<section>
<el-row>
<div v-for="(item,key) in properties" :key="key">
<div v-if="item&&item.name!=undefined">
<el-col :span="8">
<span class="vertice-span">{
{
item.name}}</span>
</el-col>
<el-col :span="13">
<el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip" @change="redraw"></el-slider>
</el-col>
<el-col :span="3">
<span class="vertice-span">{
{
item.value}}</span>
</el-col>
</div>
</div>
</el-row>
<el-row>
<el-checkbox v-model="properties.showRay">showRay</el-checkbox>
</el-row>
</section>
</div>
</div>
</template>
<script>
import * as THREE from 'three'
import {
OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
components: {
},
data() {
return {
properties: {
rotationSpeed: {
name: 'rotationSpeed',
value: 0.02,
min: 0,
max: 0.5,
step: 0.01
},
bouncingSpeed: {
name: 'bouncingSpeed',
value: 0.03,
min: 0,
max: 0.5,
step: 0.01
},
scalingSpeed: {
name: 'scalingSpeed',
value: 0.03,
min: 0,
max: 0.5,
step: 0.01
},
showRay: false
},
cube: null,
sphere: null,
cylinder: null,
step: 0,
scalingStep: 0,
camera: null,
scene: null,
renderer: null,
controls: null,
hoverTarget: null,
mouse: null
}
},
mounted() {
document.addEventListener('mousedown', this.onDocumentMouseDown, false)
document.addEventListener('mousemove', this.onDocumentMouseMove, false)
this.init()
},
methods: {
formatTooltip(val) {
return val
},
onDocumentMouseDown(event) {
//屏幕坐标系转换为three.js坐标系
let vector = new THREE.Vector3(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
)
vector = vector.unproject(this.camera)
// 创建光线投射对象
const raycaster = new THREE.Raycaster(
this.camera.position,
vector.sub(this.camera.position).normalize()
)
//射线只检查指定的成员-球体、圆柱、方块
const intersects = raycaster.intersectObjects([
this.sphere,
this.cylinder,
this.cube
])
//const intersects = raycaster.intersectObjects(this.scene.children, true)//射线检查所有指定对象的成员
// 设置选中对象透明度为0.1
if (intersects.length > 0) {
intersects[0].object.material.transparent = true
intersects[0].object.material.opacity = 0.1
}
},
onDocumentMouseMove(event) {
if (this.properties.showRay) {
//屏幕坐标系转换为three.js坐标系
let vector = new THREE.Vector3(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
)
vector = vector.unproject(this.camera)
// 创建光线投射,用于在三维空间中计算出鼠标移过了什么物体
const raycaster = new THREE.Raycaster(
this.camera.position,
vector.sub(this.camera.position).normalize()
)
//射线只检查指定的成员-球体、圆柱、方块
const intersects = raycaster.intersectObjects([
this.sphere,
this.cylinder,
this.cube
])
//console.log(intersects)
if (intersects.length > 0) {
const points = []
// 创建模拟射线的起点和终点
points.push(new THREE.Vector3(-30, 39.8, 30))
points.push(intersects[0].point)
const mat = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true,
opacity: 0.6
})
//创建管道几何体模拟射线
const tubeGeometry = new THREE.TubeGeometry(
new THREE.CatmullRomCurve3(points),
60,
0.001
)
if (this.tube) this.scene.remove(this.tube)
if (this.properties.showRay) {
//创建模拟射线的对象并添加到场景
this.tube = new THREE.Mesh(tubeGeometry, mat)
this.scene.add(this.tube)
}
}
}
},
// 初始化
init() {
this.createScene() // 创建场景
this.createMeshs() // 创建网格对象
this.createLight() // 创建光源
this.createCamera() // 创建相机
this.createRender() // 创建渲染器
this.createControls() // 创建控件对象
this.render() // 渲染
},
// 创建场景
createScene() {
this.scene = new THREE.Scene()
},
// 创建光源
createLight() {
// 添加聚光灯
const spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(-40, 60, 20)
spotLight.castShadow = true
this.scene.add(spotLight) // 聚光灯添加到场景中
// 环境光
const ambientLight = new THREE.AmbientLight(0x0c0c0c)
this.scene.add(ambientLight)
},
// 创建相机
createCamera() {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口宽度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
this.camera.position.set(-30, 40, 30) // 设置相机位置
this.camera.lookAt(new THREE.Vector3(5, 0, 0)) // 设置相机方向
this.scene.add(this.camera)
},
// 创建渲染器
createRender() {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
element.appendChild(this.renderer.domElement)
},
// 创建网格对象
createMeshs() {
// 创建底板并添加到场景
const planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1)
const planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff })
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.rotation.x = -0.5 * Math.PI
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
this.scene.add(plane)
// 创建方块并添加到场景
const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000 })
this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
this.cube.position.set(-9, 3, 0)
this.scene.add(this.cube)
// 创建球体并添加到场景
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
const sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff })
this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
this.sphere.position.set(20, 0, 2)
this.scene.add(this.sphere)
// 创建圆柱并添加到场景
const cylinderGeometry = new THREE.CylinderGeometry(2, 2, 20)
const cylinderMaterial = new THREE.MeshLambertMaterial({
color: 0x77ff77
})
this.cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
this.cylinder.position.set(0, 0, 1)
this.scene.add(this.cylinder)
},
redraw() {
this.scene.remove(this.cube)
this.scene.remove(this.sphere)
this.scene.remove(this.cylinder)
this.createMeshs()
},
animation() {
// 方块旋转
this.cube.rotation.x += this.properties.rotationSpeed.value
this.cube.rotation.y += this.properties.rotationSpeed.value
this.cube.rotation.z += this.properties.rotationSpeed.value
// 球体上下弧形跳动
this.step += this.properties.bouncingSpeed.value
this.sphere.position.x = 20 + 10 * Math.cos(this.step)
this.sphere.position.y = 2 + 10 * Math.abs(Math.sin(this.step))
// 圆柱放大缩小
this.scalingStep += this.properties.scalingSpeed.value
const scaleX = Math.abs(Math.sin(this.scalingStep / 4))
const scaleY = Math.abs(Math.cos(this.scalingStep / 5))
const scaleZ = Math.abs(Math.sin(this.scalingStep / 7))
this.cylinder.scale.set(scaleX, scaleY, scaleZ)
},
render() {
this.animation()
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 创建控件对象
createControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}
}
}
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
.controls-box {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
padding: 10px;
background-color: #fff;
border: 1px solid #c3c3c3;
}
.vertice-span {
line-height: 38px;
padding: 0 2px 0 10px;
}
</style>