v3+three.js鼠标触碰物体高亮显示文字

最新推荐文章于 2024-06-04 17:31:45 发布

少年包青菜

最新推荐文章于 2024-06-04 17:31:45 发布

阅读量1.1k

点赞数 1

文章标签： javascript 计算机外设开发语言

本文链接：https://blog.csdn.net/m0_50884068/article/details/129479316

版权

<template>
  <div ref="threeRef"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import Stats from 'three/examples/jsm/libs/stats.module.js'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 性能检测
let stats = new Stats()
stats.setMode(0)
document.body.appendChild(stats.domElement)
let threeRef=ref()
const scene=new THREE.Scene()
scene.background=new THREE.Color('#2fa799')
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.y=200 // 40
camera.position.x=0
camera.position.z=100 // 30
// 相机朝向
camera.lookAt(scene.position)
// 坐标轴
const axes=new THREE.AxesHelper(50)
scene.add(axes)
// 渲染器
const renderer=new THREE.WebGLRenderer({antialias:true})
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.render( scene, camera );
renderer.outputEncoding=THREE.sRGBEncoding
// 监听窗口变化
window.addEventListener('resize',()=>{
  camera.aspect=window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth,window.innerHeight)
},false)
// 相机
const controls=new OrbitControls(camera,renderer.domElement)
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(0, 3, 0);
scene.add(pointLight);

const pieceJ=new THREE.BoxGeometry(80,80,80)
const pieceC=new THREE.MeshBasicMaterial({color:'#808080'})
const pieceW=new THREE.Mesh(pieceJ,pieceC)
pieceW.position.x=50
pieceW.position.y=50
pieceW.position.z=50
scene.add(pieceW)


// 创建高亮材质
const highlightMaterial = new THREE.MeshBasicMaterial({
  color: '#1ea6b9'
});
// 悬浮提示框
let currentIntersected;
let tooltip = document.createElement('div');
tooltip.style.position = 'absolute';
tooltip.style.zIndex = '999';
tooltip.style.background = '#e0e7e8';
tooltip.style.padding = '4px';
tooltip.style.border = '1px solid #ccc';
tooltip.style.visibility = 'hidden';
document.body.appendChild(tooltip);
// 监听鼠标移动事件，显示悬浮提示框 点击 mouseup 触碰mousemove
renderer.domElement.addEventListener('mousemove', function(event) {
  let mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  let raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  let intersects = raycaster.intersectObjects(scene.children, true);
  if (currentIntersected) {
    currentIntersected.material = pieceW;
    currentIntersected = null;
  }
  if (intersects.length > 0) {
    tooltip.style.visibility = 'visible';
    tooltip.style.left = (event.clientX + 20) + 'px';
    tooltip.style.top = (event.clientY - 20) + 'px';
    // tooltip.innerHTML = intersects[0].object.name;
    tooltip.innerHTML=`
    <h1>哇!!!<h1>
    `
    // 触碰变颜色
    currentIntersected = intersects[0].object;
    currentIntersected.material = highlightMaterial;
  } else {
    tooltip.style.visibility = 'hidden';
  }
});

const init=()=>{
  threeRef.value?.appendChild(renderer.domElement)
  stats.update()
  controls.update()
  requestAnimationFrame(init)
  renderer.render( scene, camera );

}
onMounted(()=>{
  init()
})
</script>

<style scoped lang="less">

</style>