利用three-csg-ts对做物体交互式挖洞

默认物体均为居中,如果指定位置没有发生偏移,可能是因为在执行布尔操作之前没有正确设置变换。确保在进行布尔运算之前应用所有必要的变换。以下是经过修正的完整代码示例,它会确保圆柱正确旋转并与盒子进行 CSG 操作。
在这里插入图片描述

安装依赖

首先,确保安装了必要的依赖:

npm install three three-csg-ts

创建 Vue 组件

src 目录下创建一个新的组件文件 ThreeScene.vue,并在其中实现 Three.js 渲染和 three-csg-ts 操作。

以下是 ThreeScene.vue 的代码示例:

<template><div ref="threeContainer" class="three-container"></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { CSG } from 'three-csg-ts';export default defineComponent({name: 'ThreeScene',setup() {const threeContainer = ref<HTMLDivElement | null>(null);onMounted(() => {if (!threeContainer.value) return;// 创建场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);threeContainer.value.appendChild(renderer.domElement);// 添加轨道控制const controls = new OrbitControls(camera, renderer.domElement);// 创建一个盒子const boxGeometry = new THREE.BoxGeometry(2, 2, 2);const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);// 创建一个圆柱const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);const cylinderMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);cylinderMesh.rotation.z = Math.PI / 2;cylinderMesh.position.x = -0.5; // 调整位置使其在左半边// 更新圆柱的变换矩阵cylinderMesh.updateMatrix();// 执行 CSG 操作const boxCSG = CSG.fromMesh(boxMesh);const cylinderCSG = CSG.fromMesh(cylinderMesh);const subtractedCSG = boxCSG.subtract(cylinderCSG);// 转换回 Three.js 网格const resultMesh = CSG.toMesh(subtractedCSG, boxMesh.matrix);resultMesh.material = boxMaterial; // 应用相同的材质scene.add(resultMesh);// 添加光源const light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(5, 5, 5).normalize();scene.add(light);camera.position.z = 5;const animate = () => {requestAnimationFrame(animate);resultMesh.rotation.x += 0.01;resultMesh.rotation.y += 0.01;controls.update();renderer.render(scene, camera);};animate();// 处理窗口大小调整window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});});return {threeContainer,};},
});
</script><style>
.three-container {width: 100%;height: 100vh;
}
</style>

整合到主应用

确保在你的主应用组件(例如 App.vue)中使用 ThreeScene 组件:

<template><div id="app"><ThreeScene /></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
import ThreeScene from './components/ThreeScene.vue';export default defineComponent({name: 'App',components: {ThreeScene,},
});
</script><style>
#app {width: 100%;height: 100vh;margin: 0;
}
</style>

总结

代码确保在进行 CSG 操作之前正确设置和更新了圆柱体的变换矩阵。这样,圆柱体的旋转和位置调整可以正确应用,从而在正方体的左半边进行交互式挖洞。

这里要注意,如需移动物体,在非居中位置进行挖洞,在合理的位置添加以下代码,否则无法再指定位置进行开挖

// 更新圆柱的变换矩阵cylinderMesh.updateMatrix();

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

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

相关文章

Linux部署FTP服务

什么是FTP服务 FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;是TCP/IP协议组中的协议之一。该协议是Internet文件传输的基础&#xff0c;它由一系列规格说明文档所定义&#xff0c;目的是让用户能把一个主机上的文件复制到另一个主机上&#xff…

如何实现网络隔离后,军工单位内网数据导出的安全性?

在现代信息化战争中&#xff0c;军工单位在信息安全方面的需求尤为突出。通常会采用物理隔离&#xff0c;将网络隔离成内网和外网&#xff0c;防止外部网络的恶意入侵和数据窃取。隔离后的数据仍存在内外网交换的需求&#xff0c;即涉及到内网数据导出&#xff0c;因此每日会面…

盒马鲜生礼品卡如何使用?

盒马鲜生的礼品卡除了在门店用以外&#xff0c;还有什么用处啊 毕竟家附近的盒马距离都太远了&#xff0c;好多卡最后都闲置下来了&#xff0c;而且以前都不知道盒马卡还会过期&#xff0c;浪费了好多 还好最近发现了 盒马鲜生礼品卡现在也能在收卡云上兑现了&#xff0c;而且…

低功耗蓝牙ble开发(二)——bluez5源码分析

3、bluetoothctl工具代码分析 Bluetoothctl工具的入口程序client/main.c中的main函数&#xff0c;现在跳到main函数开始分析 &#xff08;1&#xff09;client/main.c/main函数分析 int main(int argc, char *argv[]) { ……//命令行输入初始化&#xff0c;该函数里面调…

深入解析 Spring Cloud Sentinel:分布式系统流量控制与熔断降级的全面指南

&#x1f4e2;&#x1f4e2;&#x1f4e2; 深入解析 Spring Cloud Sentinel&#xff1a;分布式系统流量控制与熔断降级的全面指南 Spring Cloud Sentinel 是阿里巴巴开源的一款强大的分布式系统流量防卫组件&#xff0c;专为微服务架构设计&#xff0c;提供流量控制、熔断降级…

watcher学习小结

架构 主要是watcher-api&#xff0c;watcher-applier&#xff0c;watcher-decision-engine watcher-applier watcher-decision-engine 将DecisionEngineManager和DecisionEngineSchedulingService封装到oslo_service&#xff0c;然后调service的launch_service&#xff0c;实…

NetSuite ERP项目中非批次物料—批次物料数据转换流程

最近在刚结束的项目上也再次碰到了非批次物料转换为批次物料的操作&#xff0c;因此也想把我们在处理数据流程中的心得写出来&#xff0c;以便复盘与总结&#xff0c;也分享给各位。 整体的步骤我们可分为准备工作&#xff0c;调整工作以及检查工作&#xff1a; 准备工作 主…

抖店退款退货率太高,平台也不帮助商家,快做不下去了怎么办?

我是王路飞。 现在很多商家对抖店的评价是&#xff1a;比拼多多还狠&#xff0c;动不动就扣保证金&#xff0c;退款率太高&#xff0c;而平台一边倒站买家&#xff0c;要是再遇到个别发疯的买家&#xff0c;商家真的很无助。 其实关于抖店退款退货率高、平台也不站在商家这一…

【运维项目经历|031】GitLab自动化运维管理平台项目

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 🏅阿里云开发者社区专家博主 💊交流社区:CSDN云计算交流社区欢迎您的加入! 目…

【Flutter】路由组件的应用 (学习记录)

前言 在 Flutter 中&#xff0c;路由用于管理应用程序中不同页面之间的导航和跳转。Flutter 提供了多种方式来实现路由管理&#xff0c;包括基本的静态路由、动态路由、命名路由以及使用第三方库&#xff08;如 GetX、Provider 等&#xff09;来管理路由。 一、 静态路由&#…

编译结果处理的shell脚本

#!/bin/bash WEB"web" DIST"dist" RED\033[0:31m GREEN\033[0;32m NC\033[0m #生产打包传参 BUILD"b" if [ -e ${WEB} ];then#删历史文件rm -r ${WEB}rm ${WEB}.zip fi #编辑文件 npm run build #检查构建是否成功 if[ -e ${DIST} ];then#改名mv…

分布式事务的八种方案解析(1)

针对不同的分布式场景业界常见的解决方案有2PC、TCC、可靠消息最终一致性、最大努力通知等方案&#xff0c;以下总结8 种常见的解决方案&#xff0c;帮助大家在实际的分布式系统中更好地运用事务。 1.2PC 二阶段提交协议&#xff08;Two-phase commit protocol&#xff09;&…

好用的视频压缩软件

在当今数字化时代&#xff0c;视频已成为我们日常生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;视频都扮演着重要的角色。视频的存储空间也越来越大&#xff0c;这给我们的设备存储带来了不小的挑战。因此&#xff0c;学习如何将视频压缩小点成为了一项实用的…

Qt QMake指南(如何写pro文件)

QMake相关介绍 QMake是一个通过编译Pro文件自动生成Makefile文件的工具。 扩展知识 这里是关于make、makefile、cmake、CMakeLists.txt、qmake等工具和文件之间关系的详细解释&#xff1a; 起始&#xff1a;当我们开始学习基础的helloworld项目时&#xff0c;一般使用gcc命令…

微信营销在使用时应该注意什么?

&#xff08;一&#xff09;注重个人品牌的打造 微信好友的信任是开展个人微信营销成功的基础&#xff0c;因此&#xff0c;平时应利用朋友圈和微信群发布一些有助于提升个人形象的信息。 &#xff08;二&#xff09;发送营销信息不可过滥 如果一个人的朋友圈内容充斥营销信息&…

叁[3],VM二次开发异常处理

1&#xff0c;开发环境 VS2022/WPF/.NetFramework4.8 VM4.2 2&#xff0c;"模块状态0&#xff0c;错误码10100005&#xff0c;错误信息:模块与平台不匹配" 现象描述&#xff1a; 1&#xff0c;WPF/NetFramework项目中打开方案&#xff0c;对工具做模板&#xff0c…

开源可视化表单可以用在哪些行业中?

很多客户朋友会询问我们&#xff0c;什么样的行业可以使用低代码技术平台及开源可视化表单&#xff1f;其实&#xff0c;随着社会的进步和发展&#xff0c;很多中小型企业都希望通过低代码技术平台能够让企业实现提质增效的目的&#xff0c;也想借助它的优势特点进入流程化办公…

MySql通过 Procedure 循环删除数据

一、问题描述 在日常使用运维中&#xff0c;一些特殊情况需要批量删除陈旧或异常数据。 如果通过 delete from 【表名】 where 【条件】 直接删除&#xff0c;可能会由于数据量过大&#xff0c;事务执行时间过长&#xff0c;造成死锁。 二、解决方案 通过 Procedure 使用循环…

怎么提升机器人外呼的转化效率

在某些情况下&#xff0c;如市场调查、产品推广等&#xff0c;语音机器人可以高效地完成大量的呼叫任务&#xff0c;并能通过预设的语音脚本和智能识别功能&#xff0c;初步筛选和分类潜在客户。此时&#xff0c;不转人工可能更为高效和经济。 然而&#xff0c;在一些需要深度沟…

jenkins使用注意问题

1.在编写流水线时并不知道当前处在哪个目录&#xff0c;导致名使用不当&#xff0c;以及文件位置不清楚 流水线任务默认路径是&#xff0c;test4_mvn为jenkins任务名 [Pipeline] sh (hide)pwd /var/jenkins_home/workspace/test4_mvn maven任务也是&#xff0c;看来是一样的…