网站建设服务是什么意思,wordpress插件WZone,北京网站制作平台,视频多的网站建设#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.Raycaster光线投射概…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.Raycaster光线投射概念 二、通过THREE.Raycaster给模型绑定点击事件1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中实现通过THREE.Raycaster给模型绑定点击事件亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.Raycaster光线投射概念
THREE.Raycaster 光线投射常用于和3D图形之间做一些点击事件和交互操作也可用于碰撞检测等 创建方法 Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) origin光线投射的原点向量。 direction向射线提供方向的方向向量应当被标准化。 near返回的所有结果比near远。near不能为负值其默认值为0。 far返回的所有结果都比far近。far不能小于near其默认值为Infinity正无穷。 属性 far远距离因数投射远点。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负并且应当比near属性大。 near近距离因数投射近点。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负并且应当比far属性小。 camera : 对依赖于视图的对象进行光线投射时使用的相机。默认为空。 layersRaycaster 在执行相交测试时使用它来选择性地忽略 3D 对象。 ray用于进行光线投射的射线。
二、通过THREE.Raycaster给模型绑定点击事件
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set定义相机方向lookAt。4、加载模型添加THREE.AxesHelper坐标辅助工具添加3000个位置随机的THREE.BoxGeometry立方体scene场景中加入坐标辅助工具和立方体。5、创建THREE.Raycaste光线投射对象创建onMouseClick事件定义THREE.Raycaster光线投射与scene中立方体交互事件。6、加入controls加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn27(通过THREE.Raycaster给模型绑定点击事件)/titlescript srclib/threejs/127/three.js-master/build/three.js/scriptscript srclib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js/scriptscript srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/script
/head
stylebody {margin: 0;}canvas {width: 100%;height: 100%;display: block;}
/style
body onloaddraw()
/body
scriptvar renderervar initRender () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(0xffffff)renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene () {scene new THREE.Scene()}var cameravar initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 100)camera.lookAt(new THREE.Vector3(0, 0, 0))}var initModel () {var helper new THREE.AxesHelper(20)scene.add(helper)var s 25var cube new THREE.BoxGeometry(s, s, s)for (var i 0; i 3000; i) {var material new THREE.MeshBasicMaterial({color: randomColor()})var mesh new THREE.Mesh(cube, material)mesh.position.x 800 * ( 2.0 * Math.random() - 1.0 )mesh.position.y 800 * ( 2.0 * Math.random() - 1.0 )mesh.position.z 800 * ( 2.0 * Math.random() - 1.0 )mesh.rotation.x Math.random() * Math.PImesh.rotation.y Math.random() * Math.PImesh.rotation.z Math.random() * Math.PImesh.updateMatrix()scene.add(mesh)}}var randomColor () {var arrHex [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f],strHex #,index;for (var i 0; i 6; i) {index Math.round(Math.random() * 15)strHex arrHex[index]}return strHex}var raycaster new THREE.Raycaster()var mouse new THREE.Vector2()var onMouseClick (event) {mouse.x (event.clientX / window.innerWidth) * 2 - 1mouse.y -(event.clientY / window.innerHeight) *2 1raycaster.setFromCamera(mouse, camera)var intersects raycaster.intersectObjects(scene.children)console.log(intersects)for (var i 0; i intersects.length; i) {intersects[i].object.material.color.set(0xff0000)}}window.addEventListener(click, onMouseClick, false)var statsvar initStats () {stats new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls () {controls new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping true}var render () {renderer.render(scene, camera)}var onWindowResize (event) {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate () {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw () {initRender()initScene()initCamera()initModel()initStats()initControls()animate()window.onresize onWindowResize}
/script
/html效果如下
