当前位置：首页 > news >正文

Three.js投射光线实现三维物体交互

news 来源：原创 2024/9/21 12:02:26

在这里插入图片描述

<template><div id="webgl"></div>
</template><script setup>
import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入 dat.gui
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';// 目标：点光源const gui = new GUI();
//1.创建场景
const scene = new THREE.Scene()//2.创建相机 角度  宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 30)
// 设置相机位置  x y z 
camera.position.set(0, 0, 10)
// 把相机添加到场景中
scene.add(camera)const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const meterial = new THREE.MeshBasicMaterial({wireframe: true // 线框
})
const redMaterial = new THREE.MeshBasicMaterial({color: '#ff0000'
})let cubeArr = []
// 1000个立方体
for (let i = -5; i < 5; i++) {for (let j = -5; j < 5; j++) {for (let z = -5; z < 5; z++) {const cube = new THREE.Mesh(cubeGeometry, meterial)cube.position.set(i, j, z)scene.add(cube)cubeArr.push(cube)}}
}// 创建投射光线对象
const raycaster = new THREE.Raycaster()// 鼠标的位置对象
const mouse = new THREE.Vector2()// 监听鼠标的位置
window.addEventListener('click', (event) => {mouse.x = (event.clientX / window.innerWidth) * 2 - 1mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)raycaster.setFromCamera(mouse, camera) // 鼠标的二维坐标，相机坐标let result = raycaster.intersectObjects(cubeArr)// 检测物体// console.log(result);result.forEach(item=>{item.object.material = redMaterial})
})// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)// 将webgel渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器的阻尼 更真实 惯性
controls.enableDamping = true// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)// 设置时钟
const clock = new THREE.Clock()function render() {controls.update()// 使用渲染器，通过相机将场景渲染进来renderer.render(scene, camera);// 渲染下一帧的时候 调用 render函数requestAnimationFrame(render)
}
render()// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight// 更新摄像机的投影矩阵camera.updateProjectionMatrix()// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight)// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})</script>