threejs 实现鼠标大面积选取场景内3d模型，SelectionBox API 案例使用

SelectionBox API 案例使用

这个函数创建了一个 3D 场景，包括一个相机、光源、多个立方体以及一个 WebGL 渲染器，并在页面上渲染这个场景


function init() {// 创建一个容器 div 元素并将其添加到页面的 body 中container = document.createElement('div');document.body.appendChild(container);// 创建透视相机，并设置位置camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 500);camera.position.z = 50;// 创建场景，并设置背景颜色scene = new THREE.Scene();scene.background = new THREE.Color(0xf0f0f0);// 添加环境光scene.add(new THREE.AmbientLight(0xaaaaaa));// 创建聚光灯，并设置位置、角度和阴影属性const light = new THREE.SpotLight(0xffffff, 10000);light.position.set(0, 25, 50);light.angle = Math.PI / 5;light.castShadow = true;light.shadow.camera.near = 10;light.shadow.camera.far = 100;light.shadow.mapSize.width = 1024;light.shadow.mapSize.height = 1024;scene.add(light);// 创建立方体几何体const geometry = new THREE.BoxGeometry();// 创建 200 个立方体对象，并设置其位置、旋转、缩放以及阴影属性，并将其添加到场景中for (let i = 0; i < 200; i++) {const object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));object.position.x = Math.random() * 80 - 40;object.position.y = Math.random() * 45 - 25;object.position.z = Math.random() * 45 - 25;object.rotation.x = Math.random() * 2 * Math.PI;object.rotation.y = Math.random() * 2 * Math.PI;object.rotation.z = Math.random() * 2 * Math.PI;object.scale.x = Math.random() * 2 + 1;object.scale.y = Math.random() * 2 + 1;object.scale.z = Math.random() * 2 + 1;object.castShadow = true;object.receiveShadow = true;scene.add(object);}// 创建 WebGL 渲染器，并设置像素比例、大小和阴影属性renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFShadowMap;// 将渲染器的 DOM 元素添加到容器中container.appendChild(renderer.domElement);// 创建性能监视器，并将其 DOM 元素添加到容器中stats = new Stats();container.appendChild(stats.dom);// 监听窗口大小变化事件，并调用 onWindowResize 函数window.addEventListener('resize', onWindowResize);
}

当窗口大小改变时调整相机的纵横比和渲染器的大小

// 当窗口大小改变时调整相机的纵横比和渲染器的大小
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
}

// 动画函数，用于更新场景并渲染帧

function animate() {requestAnimationFrame(animate);render();stats.update(); // 更新性能监视器
}

// 渲染函数，用于渲染场景

function render() {renderer.render(scene, camera);
}

// 创建一个选择框对象和一个选择辅助器对象

const selectionBox = new SelectionBox(camera, scene);
const helper = new SelectionHelper(renderer, 'selectBox');

// 监听鼠标按下事件

document.addEventListener('pointerdown', function(event) {// 将所有被选择的物体的发光效果重置为黑色for (const item of selectionBox.collection) {item.material.emissive.set(0x000000);}// 设置选择框的起始点坐标selectionBox.startPoint.set((event.clientX / window.innerWidth) * 2 - 1,-(event.clientY / window.innerHeight) * 2 + 1,0.5);
});

// 监听鼠标移动事件

document.addEventListener('pointermove', function(event) {// 如果选择辅助器处于按下状态if (helper.isDown) {// 将所有被选择的物体的发光效果重置为黑色for (let i = 0; i < selectionBox.collection.length; i++) {selectionBox.collection[i].material.emissive.set(0x000000);}// 设置选择框的结束点坐标selectionBox.endPoint.set((event.clientX / window.innerWidth) * 2 - 1,-(event.clientY / window.innerHeight) * 2 + 1,0.5);// 执行选择框的选择操作，并获取所有被选择的物体const allSelected = selectionBox.select();// 将所有被选择的物体的发光效果设置为白色for (let i = 0; i < allSelected.length; i++) {allSelected[i].material.emissive.set(0xffffff);}}
});

// 监听鼠标松开事件

document.addEventListener('pointerup', function(event) {// 设置选择框的结束点坐标selectionBox.endPoint.set((event.clientX / window.innerWidth) * 2 - 1,-(event.clientY / window.innerHeight) * 2 + 1,0.5);// 执行选择框的选择操作，并获取所有被选择的物体const allSelected = selectionBox.select();// 将所有被选择的物体的发光效果设置为白色for (let i = 0; i < allSelected.length; i++) {allSelected[i].material.emissive.set(0xffffff);}
});

全部源码


<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - box selection</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {background-color: #f0f0f0;color: #000;touch-action: none;}a {color: #08e;}.selectBox {border: 1px solid #55aaff;background-color: rgba(75, 160, 255, 0.3);position: fixed;}</style></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { SelectionBox } from 'three/addons/interactive/SelectionBox.js';import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js';let container, stats;let camera, scene, renderer;init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );camera.position.z = 50;scene = new THREE.Scene();scene.background = new THREE.Color( 0xf0f0f0 );scene.add( new THREE.AmbientLight( 0xaaaaaa ) );const light = new THREE.SpotLight( 0xffffff, 10000 );light.position.set( 0, 25, 50 );light.angle = Math.PI / 5;light.castShadow = true;light.shadow.camera.near = 10;light.shadow.camera.far = 100;light.shadow.mapSize.width = 1024;light.shadow.mapSize.height = 1024;scene.add( light );const geometry = new THREE.BoxGeometry();for ( let i = 0; i < 200; i ++ ) {const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );object.position.x = Math.random() * 80 - 40;object.position.y = Math.random() * 45 - 25;object.position.z = Math.random() * 45 - 25;object.rotation.x = Math.random() * 2 * Math.PI;object.rotation.y = Math.random() * 2 * Math.PI;object.rotation.z = Math.random() * 2 * Math.PI;object.scale.x = Math.random() * 2 + 1;object.scale.y = Math.random() * 2 + 1;object.scale.z = Math.random() * 2 + 1;object.castShadow = true;object.receiveShadow = true;scene.add( object );}renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFShadowMap;container.appendChild( renderer.domElement );stats = new Stats();container.appendChild( stats.dom );window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}//function animate() {requestAnimationFrame( animate );render();stats.update();}function render() {renderer.render( scene, camera );}const selectionBox = new SelectionBox( camera, scene );const helper = new SelectionHelper( renderer, 'selectBox' );document.addEventListener( 'pointerdown', function ( event ) {for ( const item of selectionBox.collection ) {item.material.emissive.set( 0x000000 );}selectionBox.startPoint.set(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1,0.5 );} );document.addEventListener( 'pointermove', function ( event ) {if ( helper.isDown ) {for ( let i = 0; i < selectionBox.collection.length; i ++ ) {selectionBox.collection[ i ].material.emissive.set( 0x000000 );}selectionBox.endPoint.set(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1,0.5 );const allSelected = selectionBox.select();for ( let i = 0; i < allSelected.length; i ++ ) {allSelected[ i ].material.emissive.set( 0xffffff );}}} );document.addEventListener( 'pointerup', function ( event ) {selectionBox.endPoint.set(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1,0.5 );const allSelected = selectionBox.select();for ( let i = 0; i < allSelected.length; i ++ ) {allSelected[ i ].material.emissive.set( 0xffffff );}} );</script></body>
</html>

本内容来源于小豆包，想要更多内容请跳转小豆包 》

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

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

相关文章

php反序列化及其常见魔术方法及其触发条件

php反序列化及其常见魔术方法及其触发条件

反序列化介绍&#xff1a; PHP对象反序列化操作是指将一个之前通过serialize()函数转换为字符串表示的PHP对象数据&#xff0c;还原成原始PHP对象结构的过程。当需要从存储&#xff08;如数据库、文件或网络传输&#xff09;中恢复对象状态时&#xff0c;会使用unserialize()函…
阅读更多...
【爬虫】User-Agent反爬虫

【爬虫】User-Agent反爬虫

指服务器端通过校验usr-agent 来区分正常用户和爬虫程序的手段&#xff0c;是较为初级的爬虫。 一般是在做请求的 header 中。 user-agent 记录了请求的设备信息&#xff0c;如果在请求的时候没带 user-agent 可以视为爬虫故意请求&#xff0c;对这样的请求服务器可以拦截。 使…
阅读更多...
C# Array(进阶)_Lambda表达式_冒泡排序_集合

C# Array(进阶)_Lambda表达式_冒泡排序_集合

文章目录 数组操作与高阶方法Lambda表达式Lambda表达式在C#中的应用及练习 数组排序&#xff1a;深入理解冒泡排序与选择排序冒泡排序原理 选择排序原理 选择排序和冒泡排序的区别 C#排序&#xff1a;掌握Sort()方法的使用集合类型全览&#xff1a;C#集合的使用详解C# 中的集合…
阅读更多...
2024年阿里云数据库价格_云数据库收费标准最新

2024年阿里云数据库价格_云数据库收费标准最新

2024年阿里云数据库价格查询&#xff0c;云数据库优惠活动MySQL版2核2GB 50GB配置99元一年&#xff0c;续费不涨价&#xff0c;续费也是99元1年&#xff0c;云数据库MySQL基础系列经济版 2核4GB 100GB配置227元1年&#xff0c;RDS SQL Server云数据库2核4G配置299元1年&#xf…
阅读更多...
【CSS】Vue2使用TailwindCSS方法及相关问题

【CSS】Vue2使用TailwindCSS方法及相关问题

一.安装 1.npm安装TailwindCSS npm install tailwindcssnpm:tailwindcss/postcss7-compat tailwindcss/postcss7-compat postcss^7 autoprefixer^9 2.创建配置文件 npx tailwindcss init 3.创建postcss.config.js文件 // postcss.config.js module.exports {plugins: {t…
阅读更多...
pymysql中怎么在插入的数据改成变量值

pymysql中怎么在插入的数据改成变量值

我这个是用pymysql数据库来写 mport pymysql # 连接到数据库 conn pymysql.connect(hostlocalhost, userusername, passwordpassword, dbdatabase_name) # 创建一个游标对象 cursor conn.cursor() # 准备插入语句 s1"""INSERT INTO 库名.表名 ( 这是表…
阅读更多...
git的下载与安装

git的下载与安装

下载 首先&#xff0c;打开您的浏览器&#xff0c;并输入Git的官方网站地址 点击图标进行下载 下载页面会列出不同操作系统和平台的Git安装包。根据您的操作系统&#xff08;Windows、macOS、Linux等&#xff09;和位数&#xff08;32位或64位&#xff09;&#xff0c;选择适…
阅读更多...
阿里云关系型数据库RDS概述

阿里云关系型数据库RDS概述

阿里云关系型数据库服务&#xff08;ApsaraDB RDS&#xff0c;Relational Database Service&#xff09;是阿里巴巴集团提供的云端托管式关系型数据库产品&#xff0c;旨在帮助企业与开发者在无需自建和维护底层基础设施的情况下&#xff0c;轻松部署、管理和扩展关系型数据库。…
阅读更多...
Android学习深入

Android学习深入

性能优化 学习识别和解决常见的性能问题&#xff0c;如内存泄漏、布局优化等 Android性能优化是确保应用流畅运行、提升用户体验的关键。以下是关于如何识别和解决一些常见性能问题的指导&#xff0c;包括内存泄漏、布局优化等。 1. 内存泄漏 内存泄漏发生时&#xff0c;已…
阅读更多...
Boost Graph Library中VF2（子图同构）算法的使用

Boost Graph Library中VF2（子图同构）算法的使用

Boost Graph Library&#xff0c;简称BGL&#xff0c;库中有各种各样经典的Graph算法&#xff0c;这里介绍其中的VF2算法——vf2_subgraph_iso。 数据怎么存 在BGL中&#xff0c;图是用adjacency_list类型数据存储&#xff0c;也就是邻接列表&#xff0c;里面可以存顶点信息&…
阅读更多...
【C语言】数据结构和流程控制语句

【C语言】数据结构和流程控制语句

C语言是一种广泛应用于系统编程和应用软件开发的高级编程语言。它提供了丰富的数据结构和流程控制语句&#xff0c;使程序员能够更有效地组织数据和控制程序的执行流程。本文将介绍C语言中常用的数据结构和流程控制语句&#xff0c;以帮助读者更好地理解和使用C语言。 1. 数据…
阅读更多...
vue使用element-ui 实现自定义分页

vue使用element-ui 实现自定义分页

可以通过插槽实现自定义的分页。在layout里面进行配置。 全部代码 export default { name:Cuspage, props:{total:Number, }, data(){return {currentPage:1,pageSize:10,} } methods: {setslot (h) {return(<div class"cusPage"›<span on-click{this.toBe…
阅读更多...
E4-R升级固件方法 RockChip 3562

E4-R升级固件方法 RockChip 3562

芯片&#xff1a;RockChip 3562 开发板 先安装驱动&#xff1a;DriverAssitant_v5.1.1 下载工具&#xff1a;RKDevTool_v3.13_for_window 烧录完整的update.img固件 1.选择update.img 2.关机下&#xff0c;同时Update和Power进入maskrom模式。界面会显示设备 3.点击升级 …
阅读更多...
vue部署在nginx上的配置

vue部署在nginx上的配置

1. vue中配置跨域后, 后端服务代理配置. 这里表示将所有的 /dev-api/ 开头的请求都转发到下面 proxy_pass 指定的链接中. 为了防止在访问页面时请求就被 Nginx 代理转发&#xff0c;这里需要更具体的配置&#xff0c;才能和前端访问请求区分开 2. Vue 路由刷新时可能会抛出 4…
阅读更多...
【代码随想录算法训练营第二十七天 | LeetCode39. 组合总和、 40.组合总和II、131.分割回文串】

【代码随想录算法训练营第二十七天 | LeetCode39. 组合总和、 40.组合总和II、131.分割回文串】

代码随想录算法训练营第二十七天 | LeetCode39. 组合总和、 40.组合总和II、131.分割回文串 一、39. 组合总和 解题代码C&#xff1a; class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& c…
阅读更多...
avue-crud顶部操作按钮插槽；avue-crud列数据插槽；avue-crud行操作按钮插槽

avue-crud顶部操作按钮插槽；avue-crud列数据插槽；avue-crud行操作按钮插槽

1.avue-crud顶部操作按钮插槽&#xff1b; <template slot"menuLeft" slot-scope"{ size }"><div class"left"><div class"btn"><el-button type"primary" size"small" click"onBatchR…
阅读更多...
新能源汽车小三电系统

新能源汽车小三电系统

小三电系统 新能源电动汽车的"小三电"系统&#xff0c;一般指车载充电机(OBC)、车载 DC/DC 变换器&#xff0c;和高压直流配电盒(PDU)。一辆纯电动汽车一般配备一台OBC 和一台车载 DC/DC 变换器。OBC将外部输入的交流电转化为直流电输出给电池&#xff0c;DC/DC衔接…
阅读更多...
zabbix配置

zabbix配置

1 下载zabbix 1 配置yum源 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release- 5.0-1.el7.noarch.rpm yum clean all yum makecache fast 完成后会出现zabbix.repo文件 2安装zabbix服务 yum -y install zabbix-server-mysql zabbix-web-mysql z…
阅读更多...
使用stream流合并多个List（根据实体类特定属性合并）

使用stream流合并多个List（根据实体类特定属性合并）

开发情景 现有多个List集合，其中都是一样的实体类，这里我想根据实体类的特定属性将它们合并在一起，形成一个最终的List集合。 这里主要用到了Stream流的flatMap方法与reduce方法。 flatMap：可以将多个Stream流合并在一起，形成一个Stream流。 reduce：可以将Stram流中的元…
阅读更多...
初级爬虫实战——哥伦比亚大学新闻

初级爬虫实战——哥伦比亚大学新闻

文章目录 发现宝藏一、 目标二、简单分析网页1. 寻找所有新闻2. 分析模块、版面和文章 三、爬取新闻1. 爬取模块2. 爬取版面3. 爬取文章 四、完整代码五、效果展示 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不…
阅读更多...
最新文章

Copyright @ 2022~2023