ThreeJS-3D教学七-交互

在threejs中想要选中一个物体，点击或者鼠标悬浮，又或者移动端的touch事件，核心都是通过new THREE.Raycaster完成的。这里用到了一个概念，即我们点击时的 屏幕坐标 转换为 three中的3D坐标。
先看效果图：
在这里插入图片描述
代码是：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}.label {font-size: 20px;color: #000;font-weight: 700;}</style>
</head>
<body>
<div id="container"></div>
<script type="importmap">{"imports": {"three": "../three-155/build/three.module.js","three/addons/": "../three-155/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
let stats, labelRenderer, gpuPanel, temporaryKeep;
let camera, scene, renderer, controls;
const group = new THREE.Group();
let widthImg = 200;
let heightImg = 200;
const mouse = new THREE.Vector2();
init();
initHelp();
initLight();
axesHelperWord();
animate();
// 添加平面
addPlane();let geometry = new THREE.BoxGeometry(20, 20, 10);
let material = new THREE.MeshLambertMaterial({color: 0xcccccc});
let cube = new THREE.Mesh(geometry, material);
cube.position.y = 10;
cube.name = 'BoxGeometry';
scene.add(cube);/*** CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer)radiusTop—顶部圆柱体的半径。默认值为1。radiusBottom—底部圆柱体的半径。默认值为1。height——圆柱体的高度。默认值为1。radialSegments—圆柱体圆周上的分段面数。默认值为32heightSegments—沿圆柱体高度的面行数。默认值为1。*/
let geometry1 = new THREE.CylinderGeometry(15, 15, 10, 32, 1);
let material1 = new THREE.MeshLambertMaterial({color: 0xffff00});
let cylinder = new THREE.Mesh(geometry1, material1);
cylinder.position.set(30, 5, -50);
cylinder.name = 'CylinderGeometry';
scene.add(cylinder);function onDocumentMouseMove(event) {event.preventDefault();// 将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义 如果 canvas有左边距 和 上边距 需要减去mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;// 新建一个三维单位向量 假设z方向就是1// 根据照相机，把这个向量转换到视点坐标系const vector = new THREE.Vector3(mouse.x, mouse.y, 1).unproject(camera);// 在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。const raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());//射线和模型求交，选中一系列直线const intersects = raycaster.intersectObjects(scene.children);console.log('imtersrcts=', intersects);/*** 不是所有的 Material 都有这个属性* emissive.getHex* emissive.setHex*/if (intersects.length > 0) {//选中第一个射线相交的物体if (temporaryKeep !== intersects[0].object) {if (temporaryKeep) temporaryKeep.material.emissive?.setHex(temporaryKeep.currentHex);temporaryKeep = intersects[0].object;temporaryKeep.currentHex = temporaryKeep.material.emissive?.getHex();temporaryKeep.material.emissive?.setHex(0xff0000);}} else {if (temporaryKeep) temporaryKeep.material.emissive?.setHex(temporaryKeep.currentHex);temporaryKeep = null;}
}function addPlane() {// 创建一个平面 PlaneGeometry(width, height, widthSegments, heightSegments)const planeGeometry = new THREE.PlaneGeometry(widthImg, heightImg, 1, 1);// 创建 Lambert 材质：会对场景中的光源作出反应，但表现为暗淡，而不光亮。const planeMaterial = new THREE.MeshPhongMaterial({color: 0xb2d3e6,side: THREE.DoubleSide});const plane = new THREE.Mesh(planeGeometry, planeMaterial);// 以自身中心为旋转轴，绕 x 轴顺时针旋转 45 度plane.rotation.x = -0.5 * Math.PI;plane.position.set(0, -4, 0);scene.add(plane);
}function init() {camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 2000 );camera.up.set(0, 1, 0);camera.position.set(60, 40, 60);camera.lookAt(0, 0, 0);scene = new THREE.Scene();scene.background = new THREE.Color( '#ccc' );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );labelRenderer = new CSS2DRenderer();labelRenderer.setSize( window.innerWidth, window.innerHeight );labelRenderer.domElement.style.position = 'absolute';labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.pointerEvents = 'none';document.getElementById( 'container' ).appendChild( labelRenderer.domElement );controls = new OrbitControls( camera, renderer.domElement );controls.mouseButtons = {LEFT: THREE.MOUSE.PAN,MIDDLE: THREE.MOUSE.DOLLY,RIGHT: THREE.MOUSE.ROTATE};controls.enablePan = true;// 设置最大最小视距controls.minDistance = 20;controls.maxDistance = 1000;window.addEventListener( 'resize', onWindowResize );stats = new Stats();stats.setMode(1); // 0: fps, 1: msdocument.body.appendChild( stats.dom );gpuPanel = new GPUStatsPanel( renderer.getContext() );stats.addPanel( gpuPanel );stats.showPanel( 0 );scene.add( group );document.addEventListener('click', onDocumentMouseMove, false);
}function initLight() {const light = new THREE.DirectionalLight(new THREE.Color('rgb(253,253,253)'));light.position.set(100, 100, -10);light.intensity = 3; // 光线强度light.castShadow = true; // 是否有阴影light.shadow.mapSize.width = 2048; // 阴影像素light.shadow.mapSize.height = 2048;// 阴影范围const d = 80;light.shadow.camera.left = -d;light.shadow.camera.right = d;light.shadow.camera.top = d;light.shadow.camera.bottom = -d;light.shadow.bias = -0.0005; // 解决条纹阴影的出现// 最大可视距和最小可视距light.shadow.camera.near = 0.01;light.shadow.camera.far = 2000;const AmbientLight = new THREE.AmbientLight(new THREE.Color('rgb(255, 255, 255)'));scene.add( light );scene.add( AmbientLight );
}function initHelp() {// const size = 100;// const divisions = 5;// const gridHelper = new THREE.GridHelper( size, divisions );// scene.add( gridHelper );// The X axis is red. The Y axis is green. The Z axis is blue.const axesHelper = new THREE.AxesHelper( 100 );scene.add( axesHelper );
}function axesHelperWord() {let xP = addWord('X轴');let yP = addWord('Y轴');let zP = addWord('Z轴');xP.position.set(50, 0, 0);yP.position.set(0, 50, 0);zP.position.set(0, 0, 50);
}function addWord(word) {let name = `<span>${word}</span>`;let moonDiv = document.createElement( 'div' );moonDiv.className = 'label';// moonDiv.textContent = 'Moon';// moonDiv.style.marginTop = '-1em';moonDiv.innerHTML = name;const label = new CSS2DObject( moonDiv );group.add( label );return label;
}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );
}function animate() {requestAnimationFrame( animate );stats.update();controls.update();labelRenderer.render( scene, camera );renderer.render( scene, camera );
}
</script>
</body>
</html>

具体思路代码中都有注释，实在不懂也没关系，函数一封装先用着就是，后面慢慢理解！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/98894.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

掌握这3点，企业就能规避收款业务中的合规风险

掌握这3点，企业就能规避收款业务中的合规风险

随着国家政策监管日趋严格&#xff0c;企业合规管理正在受到高度关注。在企业收业务款场景中&#xff0c;银行回单管理容易被忽略&#xff0c;若处理不当&#xff0c;将面临合规风险。具体表现如下&#xff1a; 审计依据不充分 银行回单是企业内部控制和合规管理的重要组成部…
阅读更多...
vue3 集成 tailwindcss

vue3 集成 tailwindcss

tailwindcss 介绍 Tailwind CSS 是一个流行的前端框架&#xff0c;用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类&#xff0c;这些类可以直接应用到 HTML 元素上&#xff0c;从而加速开发过程并提高样式一致性。 主要特点…
阅读更多...
大语言模型学到什么

大语言模型学到什么

背景&#xff1a; 这篇文章是对《LANGUAGE MODELS REPRESENT SPACE AND TIME》论文的翻译加解读。之所以选这篇文章是因为最近在研究大模型的可解释性&#xff0c;以及基于可解释性对大模型的下游任务适配做训练级别可控性增强研究。其实总结成两句话就是&#xff1a; 1.大模…
阅读更多...
Spring【@Resource、@Autowired+lombook+Bean的生命周期】

Spring【@Resource、@Autowired+lombook+Bean的生命周期】

Resource 和 Autowired 的区别 在Spring中找Bean的两种方式&#xff1a;①先根据类型查找②再根据名称查找 Autowired先根据类型查找&#xff0c;再根据名称查找【根据上述查找结果不唯一&#xff0c;再添加一个 Qualifier(value“”)&#xff0c;就可以查找】 Resource先根据名…
阅读更多...
【12】c++设计模式——＞单例模式练习（任务队列）

【12】c++设计模式——＞单例模式练习（任务队列）

属性&#xff1a; &#xff08;1&#xff09;存储任务的容器&#xff0c;这个容器可以选择使用STL中的队列&#xff08;queue) &#xff08;2&#xff09;互斥锁&#xff0c;多线程访问的时候用于保护任务队列中的数据 方法&#xff1a;主要是对任务队列中的任务进行操作 &…
阅读更多...
【C++ 学习 ㉖】- 布隆过滤器详解（哈希扩展）

【C++ 学习 ㉖】- 布隆过滤器详解（哈希扩展）

目录 一、布隆过滤器的简介 二、布隆过滤器的实现 2.1 - BloomFilter.h 2.2 - test.cpp 一、布隆过滤器的简介 布隆过滤器&#xff08;Bloom Filter&#xff09;是由 Burton Howard Bloom 在 1970 年提出的一种紧凑型的、比较巧妙的概率型数据结构&#xff08;probabilist…
阅读更多...
【排序算法】插入排序

【排序算法】插入排序

文章目录 一&#xff1a;基本概念1.1 介绍1.2 原理1.3 插入排序法思想 二&#xff1a;代码实现2.1 源码2.2 执行结果2.3 测试八万条数据 三&#xff1a;算法分析3.1 时间复杂度3.2 空间复杂度3.3 稳定性 一&#xff1a;基本概念 1.1 介绍 插入式排序属于内部排序法&#xff0…
阅读更多...
基于KubeAdm搭建多节点K8S集群

基于KubeAdm搭建多节点K8S集群

基于KubeAdm搭建多节点K8S集群 1、基本流程&#xff08;注意 docker 版本和kubeadm、kubelet、kubectl的关系&#xff09;2、安装utils依赖&#xff08;安装范围&#xff1a;主节点工作节点&#xff09;3、安装docker &#xff08;安装范围&#xff1a;主节点工作节点&#xff…
阅读更多...
Maven 自动化构建

Maven 自动化构建

自动化构建定义了这样一种场景: 在一个项目成功构建完成后&#xff0c;其相关的依赖工程即开始构建&#xff0c;这样可以保证其依赖项目的稳定。 比如一个团队正在开发一个项目 bus-core-api&#xff0c; 并且有其他两个项目 app-web-ui 和 app-desktop-ui 依赖于这个项目。 …
阅读更多...
Transformer预测 | Python实现基于Transformer的股票价格预测（tensorflow）

Transformer预测 | Python实现基于Transformer的股票价格预测（tensorflow）

文章目录 效果一览文章概述程序设计参考资料效果一览 文章概述 Transformer预测 | Python实现基于Transformer的股票价格预测（tensorflow） 程序设计 import numpy as np import matplotlib.pyplot
阅读更多...
TCP和UDP的由浅到深的详细讲解

TCP和UDP的由浅到深的详细讲解

目录 前言 一.TCP 1.1 什么是TCP&#xff1f; 1.2TCP的连接与释放(确认应答机制&#xff09; 1.2.1三次握手 1.2.2四次挥手 1.3TCP滑动窗口&#xff08;效率机制&#xff09; 1.4流量控制&#xff08;安全机制&#xff09; 1.5拥塞控制&#xff08;安全机制&#xff0…
阅读更多...
【力扣1812】判断国际象棋棋盘中一个格子的颜色

【力扣1812】判断国际象棋棋盘中一个格子的颜色

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析 一、题目描述 题目链接&#xff1a;判断国际象棋棋盘中一个格子的颜色 给你一个坐标 coordina…
阅读更多...
环信web、uniapp、微信小程序SDK报错详解---登录篇

环信web、uniapp、微信小程序SDK报错详解---登录篇

项目场景&#xff1a; 记录对接环信sdk时遇到的一系列问题&#xff0c;总结一下避免大家再次踩坑。这里主要针对于web、uniapp、微信小程序在对接环信sdk时遇到的问题。主要针对报错400、404、401、40 (一) 登录用户报400 原因分析&#xff1a; 从console控制台输出及networ…
阅读更多...
【C++】哈希与布隆过滤器

【C++】哈希与布隆过滤器

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…
阅读更多...
Unity 之 EditorGUILayout.BeginHorizontal/EndHorizontal异常报错问题

Unity 之 EditorGUILayout.BeginHorizontal/EndHorizontal异常报错问题

报错内容&#xff1a; 缘由&#xff1a;由于在EditorGUILayout.EndHorizontal()之前执行了类似打开窗口的逻辑 解决办法&#xff1a; 在EditorGUILayout.EndHorizontal()之前执行GUIUtility.ExitGUI();
阅读更多...
javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

//所有的图标用的字符&#xff0c;以后可以换成网上的css-icon图标库的图标&#xff0c;再设置一下css样式即可简单的使用 //这里所有的标签元素都是直接获取&#xff0c;没有使用委托&#xff0c;如果使用委托性能会更好&#xff0c;这里只做了简单的清理&#xff0c;让内存回…
阅读更多...
利用KerasCV YOLOv8轻松实现目标精确检测

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测，并附录完整代码。。 自从You Only Look Once（简称 YOLO）的诞生以来，目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言，它是通过在…
阅读更多...
Redis-04独立功能的实现

Redis-04独立功能的实现

1、发布与订阅 介绍&#xff1a; Redis的发布与订阅功能由PUBLISH、SUBSCRIBE、PSUBSCRIBE等命令组成。通过SUBSCRIBE命令&#xff0c;客户端可以订阅一个或多个频道&#xff0c;成为这些频道的订阅者&#xff08;subscriber&#xff09;每当有其他客户端向被订阅的频道发送消…
阅读更多...
监控搭建-Prometheus

监控搭建-Prometheus

监控搭建-Prometheus 1、背景2、目标3、选型4、Prometheus4.1、介绍4.2、架构4.3、构件4.4、运行机制4.5、环境介绍4.6、数据准备4.7、网络策略4.7.1、主机端口放行4.7.2、设备端口放行 4.8、部署4.9、验证4.10、配置 1、背景 随着项目信息化进程的推进&#xff0c;操作系统、…
阅读更多...
2579. 统计染色格子数（javascript）

2579. 统计染色格子数（javascript）

有一个无穷大的二维网格图&#xff0c;一开始所有格子都未染色。给你一个正整数 n &#xff0c;表示你需要执行以下步骤 n 分钟&#xff1a; 第一分钟&#xff0c;将 任一格子染成蓝色。之后的每一分钟&#xff0c;将与蓝色格子相邻的 所有 未染色格子染成蓝色。 下图分别是 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023