ThreeJs中使用Cannon实现方块自由落体效果

        之前有做过小球的掉落效果,不过那个从画面上只能看出来重力加速度和接触地面反弹的效果,可能没有那么直观,也许用一些js加物理公式也能实现类似的效果,这节用小方块来演示,可以很直观的看出物理世界的现象,因为方块是有棱角的,掉落的时候与地面接触是棱或者角的话就会弹开翻转再落地。        

        同样,我们先设置一个物理世界,在物理世界中放置一个方块和地面,并设置地面和方块之间的反弹恢复系数,同样在Threejs中使用boxGermory设置一个长方体,在渲染的时候保持此长方体和物理世界的小方块保持角度和位置一致,便于在画面上观察小方块的掉落效果。核心代码在下面了,如果自己尝试有问题可以留言向我要完整的源码。

initCarton(){//新建一个物理模型世界this.world = new CANNON.World();// 设置物理世界重力加速度,此处设置为y轴的反方向,也就是往y轴反方向存在重力this.world.gravity.set(0, -20, 0);// 新建一个物理小方块:对应threejs的网格小方块const boxMaterial = new CANNON.Material()this.box = new CANNON.Body({mass: 0.3,//碰撞体质量material: boxMaterial,//设置小方块的材质shape:new CANNON.Box(new CANNON.Vec3(15, 6, 15)),//设置方形大小});this.box.position.y = 100;//设置小方块的位置this.box.quaternion.setFromEuler(Math.PI / 3, Math.PI / 3, Math.PI / 3);this.world.addBody(this.box);//将小方块添加到物理世界中// 新建物理地面const groundMaterial = new CANNON.Material()const groundBody = new CANNON.Body({mass: 0, // 质量为0,始终保持静止,不会受到力碰撞或加速度影响shape:new CANNON.Plane(),//新建物理模型的底面material: groundMaterial,//地面材质});// 改变平面默认的方向,法线默认沿着z轴,旋转到平面向上朝着y方向groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);this.world.addBody(groundBody);// 设置地面材质和小方块材质之间的碰撞反弹恢复系数,也就是底面和小方块的材质之间存在的反弹系数,const contactMaterial = new CANNON.ContactMaterial(groundMaterial, boxMaterial, {restitution: 0.2 //反弹恢复系数})// 把关联的材质添加到物理世界中this.world.addContactMaterial(contactMaterial)// 实体模型的网格小方块,这里是用来对应显示物理模型下的小方块位置const geometry = new THREE.BoxGeometry(15,6, 15);const material = new THREE.MeshLambertMaterial({color: 0x00ffff,});this.boxmesh = new THREE.Mesh(geometry, material);this.boxmesh.position.y = 100;this.boxmesh.rotation.set(Math.PI / 3, Math.PI / 3, Math.PI / 3);this.scene.add(this.boxmesh)//实体地面的网格模型,这里用来显示对应物理对应的地面const planeGeometry = new THREE.PlaneGeometry(200, 200);const planeMaterial = new THREE.MeshLambertMaterial({color:0x777777,});const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);planeMesh.rotateX(-Math.PI / 2);this.scene.add(planeMesh)},

效果视频:

小方块自由落体

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

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

相关文章

ALPHA开发板烧录工具MfgTool烧写方法

一. 简介 MfgTool 工具是 NXP 提供的专门用于给 I.MX 系列 CPU 烧写系统的软件,可以在 NXP 官网下载到。运行在windows下。可以烧写uboot.imx、zImage、dtb,rootfs。通过 USB口进行烧写。 上一篇文章简单了解了 ALPHA开发板烧录工具MfgTool。文章地址…

数据结构之交换排序

目录 交换排序 冒泡排序 冒泡排序的时间复杂度 快速排序 快速排序单趟排序的时间复杂度 快速排序的时间复杂度 交换排序 在日常生活中交换排序的使用场景是很多的,比如在学校做早操,老师通常会让学生按大小个排队,如果此时来了一个新学…

MySQL系列(一):索引篇

为什么是B树? 我们推导下,首先看下用哈希表做索引,是否可以满足需求。如果我们用哈希建了索引,那么对于如下这种SQL,通过哈希,可以快速检索出数据: select * from t_user_info where id1;但是这…

ThreadX开源助力Microsoft扩大应用范围:对比亚马逊AWS的策略差异

全球超过120亿台设备正在运行ThreadX,这是一款专为资源受限环境设计的实时操作系统。该操作系统在微控制器和小型处理器上表现出色,以极高的可靠性和精确的时间控制处理任务而闻名。 ThreadX曾是英特尔芯片管理引擎的引擎,并且是控制Raspber…

JavaScript 宿主对象

JavaScript 宿主对象 BOM window 全局对象 window对象是可以直接被访问到的每一个用var声明的变量都会自动作为window对象的属性存在 function声明的函数也会自动作为window对象的方法存在访问window对象的属性和方法可以不用写window 属性 innerWidth 获取浏览器窗口的宽度…

AWS基于x86 vs Graviton(ARM)的RDS MySQL性能对比

概述 这是一个系列。在前面,我们测试了阿里云经济版(“ARM”)与标准版的性能/价格对比;华为云x86规格与ARM(鲲鹏增强)版的性能/价格对比。现在,再来看看AWS的ARM版本的RDS情况 在2018年&#…

User: zhangflink is not allowed to impersonate zhangflink

使用hive2连接进行添加数据是报错: [08S01][1] Error while processing statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask. User: zhangflink is not allowed to impersonate zhangflink 有些文章说需要修…

配置OSS后如何将服务器已有文件上传至OSS,推荐使用ossutil使用

1.下载安装ossutil sudo -v ; curl https://gosspublic.alicdn.com/ossutil/install.sh | sudo bash2.交互式配置生成配置文件 ossutil config 根据提示分别设置配置文件路径、设置工具的语言、Endpoint、AccessKey ID、AccessKey Secret和STSToken参数,STSToken留…

自定义BeanPostProcessor之Feign组件服务间优雅调用

Feign是什么 feign是声明式的web service客户端,它让微服务之间的调用变得更简单了,类似controller调用service。Spring Cloud集成了Ribbon和Eureka,可在使用Feign时提供负载均衡的http客户端。 Feign怎么使用 FeignClient(value "s…

【Axure高保真原型】个性化自定义图片显示列表

今天和大家分享个性化自定义图片显示列表的原型模板,鼠标点击多选按钮,可以切换按钮选中或者取消选中,按钮选中时,对应图片会在列表中显示,按钮取消后,对应图片会自动隐藏。那这个模板是用中继器制作的&…

系统设计-缓存介绍

该图说明了我们在典型架构中缓存数据的位置。 沿着流程有多个层次。 客户端应用程序:HTTP 响应可以由浏览器缓存。我们第一次通过 HTTP 请求数据,返回时在 HTTP 标头中包含过期策略;我们再次请求数据,客户端应用程序首先尝试从浏…

前端实现检索文本高亮实现

文章目录 一、前言二、实现三、最后 一、前言 使用搜索引擎时的搜索结果高亮,搜索文本在查询出来的结果内高亮显示,这种在全文检索应该很常见 二、实现 看了下百度检索的实现,是给内容加上了em标签,然后给em标签设置颜色&#x…

机器的深度强化学习算法可以被诱导

设计一个好的奖励函数是机器深度强化学习算法的关键之一。奖励函数用于给予智能体(机器)在环境中采取不同行动时的反馈信号,以指导其学习过程。一个好的奖励函数应该能够引导智能体朝着期望的行为方向学习,并尽量避免潜在的问题&a…

Gitlab 安装手册

MD[Gitlab 安装手册] Gitlab 安装手册 说明: Gitlab最低配置1核2g,建议配置2核4g以上且单独部署,如有多项目CI/CD要求,可以4核8g 1. 安装相关依赖(安装policycoreutils) [rootsjclinux ~]# yum -y install policycoreutils openssh-server openssh-clients postfix 2. 启动s…

区块链密码学:基础知识、应用与未来发展

一、引言 区块链技术,作为一种分布式、去中心化的数据管理方式,密码学在其安全性和可靠性方面发挥着至关重要的作用。本文将详细介绍区块链密码学的基础知识、应用以及未来发展趋势。 二、区块链密码学基础知识 区块链密码学是区块链技术的核心组成部分…

从产业升级看网站安全:解决网站被攻击的创新之道

随着数字化浪潮的不断涌动,网站被攻击的问题成为互联网时代亟需解决的难题。从产业升级的角度来看,我们可以通过创新手段来强化网站安全,确保网络生态的健康运行。 互联网产业的蓬勃发展与安全隐患 互联网产业在快速蓬勃的发展中,…

vue 学习 -- day39(reactive 对比 ref)

从定义数据角度对比: ref用来定义:基本类型数据。reactive用来定义:对象(或数组)类型数据。备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。从…

【海思SS528 | VO】MPP媒体处理软件V5.0 | VO模块编程总结

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

mysql5.7安装详细教程

文章目录 1 引言1.1 现有的数据存储方式有哪些?1.2 以上存储方式存在哪些缺点? 2 数据库2.1 概念2.2 数据库的分类 3 数据库管理系统3.1 概念3.2 常见数据库管理系统 4 MySQL4.1 简介4.2 访问与下载4.3 安装4.3.1 解压缩到非中文目录4.3.2 编写配置文件4…

一张图理解接口测试框架

测试框架先向测试数据库中插入测试数据(如:name”Tom“) 调用被测系统提供的接口(传参:name”Tom“) 从测试数据库中查到符合参数的数据 将查询到的数据组成Json格式,并返回给测试框架 提供…