Three.js 实现点击模型改变颜色

想实现点击模型，改变模型颜色的效果。在网上看了一些代码，发现特别搞笑，很多的博客给出的计算代码都是错误的，根本无法实现点击效果，还在不同的博客相互的复制，只能感叹抄袭党太多。下面我简单的介绍一些我的方法，我是在Vue中开发的。

文章目录

Three.js 实现点击模型改变颜色
- 三维空间点击事件的原理
- 环境准备
- 代码实现
- 效果展示
- 注意事项

三维空间点击事件的原理

在三维空间内判断鼠标点击的是哪个模型，核心的原理还是射线碰撞，*即从相机（camera）的中心点到屏幕上鼠标点组成一条射线，计算三维场景内哪些模型被射线穿过。*原理比较简单，计算比较复杂。主要是涉及了三个坐标系的转换：

将鼠标点从屏幕坐标系（y正向向下，x轴向右）转换到三维空间里的可视窗口的二维坐标系（正常的二维坐标系，但xy的区间是-1~1）；
将三维空间里的可视窗口的二维坐标系点转换为三维空间的xyz坐标系
将2转换后的点和camera的中心点组成射线

环境准备

基于vue的环境准备，可以参考我之前的博文

代码实现

<template><div id="app" @click="clickBox"></div>
</template><script>
import {Scene,PerspectiveCamera,WebGLRenderer,Mesh,BoxGeometry, MeshBasicMaterial, Raycaster, Vector2
} from 'three';import {OrbitControls} from "@/lib/OrbitControls"export default {name: 'App',components: {},mounted() {let scene = new Scene();let camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);let renderer = new WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);let app = document.getElementById("app")app.appendChild(renderer.domElement);//加载场景控制插件let controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.enableZoom = true;controls.autoRotate = false;controls.autoRotateSpeed = 3;controls.enablePan = true;controls.enableKeys = true;controls.keyPanSpeed = 7;controls.keys = {LEFT: 37,UP: 38,RIGHT: 39,BOTTOM: 40}this.controls = controls;this.createBox(scene);this.createBox(scene);this.createBox(scene);camera.position.z = 5;this.camera = camera;this.scene = scene;//渲染场景let animate = () => {requestAnimationFrame(animate);renderer.render(scene, camera);};animate();},methods: {//生成随机盒子模型createBox(scene) {let geometry = new BoxGeometry();let material = new MeshBasicMaterial({color: 0x00ff00});let cube = new Mesh(geometry, material);cube.position.x = Math.random() * 6-3cube.position.y = Math.random() * 6-3scene.add(cube);},clickBox(event) {console.log(Math.random().toString(16))let raycaster = new Raycaster();let mouse = new Vector2();console.log(this.scene.children)//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标mouse.x = (event.clientX / window.innerWidth) * 2 - 1mouse.y = 1-(event.clientY / window.innerHeight) * 2console.log(mouse)// 通过鼠标点的位置和当前相机的矩阵计算出raycasterraycaster.setFromCamera(mouse, this.camera);// 获取raycaster直线和所有模型相交的数组集合var intersects = raycaster.intersectObjects(this.scene.children);console.log(intersects);//将所有的相交的模型的颜色设置为红色for (var i = 0; i < intersects.length; i++) {intersects[i].object.material.color.set(0xff0000);}}}}
</script><style>
#app {}body, html {margin: 0;padding: 0;
}
</style>

效果展示

注意事项

网上很多的代码写的都是

mouse.y = (event.clientY / window.innerHeight) * 2 + 1;

可以看出来这个y一直都是大于1的

Three.js 实现点击模型改变颜色相关推荐

jsp点击文字改变颜色_这样给图片添加上文字、诗词、歌词，超吸睛
这样给图片添加上文字.诗词.歌词,超吸睛! 很多小伙伴想给自己的图片天爱上文字.诗词还有歌词,但是不知道怎么天爱才能吸引别人. 1. 直接给图片添加上文字.诗词或者歌词,可以给图片调节一个背景颜色. ...
C4D卡死和运行中一点击模型填充颜色就卡退出
之前用过C4D做一些模型,不太清楚一些其他卡住的原因,自己当初只遇到了用一会就卡退出来崩溃的原因. 这个原因在这里贴出,估计出现这个原因的人很多都放弃C4D了,现在就写一下. 这个错误是我把错误发给C ...
Vue 点击文字改变文字颜色
Vue 点击文字改变颜色,点击哪一个改变哪一个 <!DOCTYPE html> <html lang="en"> <head><meta ...
Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法，本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片希望本文所述对大家的javascrip ...
three.js改变模型局部颜色(vue)
传入想要改变颜色的3D模型对象,选择子级mesh的名字修改模型局部颜色 object.traverse(child=>{// if(object.name==='model.glb') {// ...
Three.js 点击模型，高亮发光模型外轮廓
最近在开发一个功能,在三维场景里有很多模型,需要点击模型,高亮对应的模型,代表选中了该模型.做起来还是稍微麻烦一些的. 具体效果实现流程主要的流程还是, Created with Raphaël ...
Vue实现点击列表切换并改变颜色
Vue实现点击列表切换并改变颜色实现效果图如下通过Vue的父子组件传值实现效果,单击切换颜色会进性改变并添加下划线父组件代码实现(Home.vue) 需要进性对子组件的导入 import Tab ...
html改游戏聊天字体颜色,html点击按钮改变字体颜色怎么实现
html点击按钮改变字体颜色的实现方法:1.创建一个html文件:2.在html文件中添加html代码架构:3.在body标签里面使用button标签实现一个按钮,并使用style给按钮添加样式以及使 ...
html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色适时切换网页指定区域背景颜色请选择背景: function g ...

Three.js 实现点击模型改变颜色

Three.js 实现点击模型改变颜色

文章目录

三维空间点击事件的原理

环境准备

代码实现

效果展示

注意事项

Three.js 实现点击模型改变颜色相关推荐

最新文章

热门文章