學習threejs，使用Physijs物理引擎

👨??? 主頁： gis分享者
👨??? 感謝各位大佬 點贊👍 收藏? 留言📝 加關注?!
👨??? 收錄于專欄：threejs gis工程師

文章目錄

  • 一、🍀前言
    • 1.1 ??Physijs 物理引擎
      • 1.1.1 ??代碼示例
      • 1.1.2 ??方法/屬性
  • 二、🍀使用Physijs物理引擎
    • 1. ??實現思路
    • 2. ??代碼樣例

一、🍀前言

本文詳細介紹如何基于threejs在三維場景中使用Physijs物理引擎，親測可用。希望能幫助到您。一起學習，加油！加油！

1.1 ??Physijs 物理引擎

Three.js 的 Physi.js 是一個基于 Physijs 的物理引擎插件，用于為 Three.js 場景添加物理模擬（如碰撞檢測、重力、剛體動力學等）。

1.1.1 ??代碼示例

// 初始化 Physi.js 場景
const scene = new Physijs.Scene();// 創建帶有物理效果的立方體
const box = new Physijs.BoxMesh(new THREE.BoxGeometry(1, 1, 1),new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(box);// 監聽碰撞事件
box.addEventListener('collision', (otherObject) => {console.log('發生碰撞！', otherObject);
});// 在動畫循環中更新物理
function animate() {requestAnimationFrame(animate);scene.simulate(); // 更新物理模擬renderer.render(scene, camera);
}
animate();

1.1.2 ??方法/屬性

Physijs.Scene
創建支持物理的 Three.js 場景。

mesh.setLinearVelocity()
設置物體的線性速度（移動速度）。

mesh.setAngularVelocity()
設置物體的角速度（旋轉速度）。

mesh.addEventListener()
監聽碰撞事件（如 ‘collision’）。

new Physijs.BoxMesh()
創建帶有長方體碰撞體的物體。

new Physijs.SphereMesh()
創建帶有球體碰撞體的物體。

scene.simulate()
在渲染循環中調用，更新物理模擬。

Physijs.createMaterial(material, friction, restitution)
創建物理材質，影響摩擦力和彈性。
參數：
material：Three.js 材質（如 THREE.MeshPhongMaterial）。
friction：摩擦系數（默認 0.8）。
restitution：彈性系數（默認 0）。

二、🍀使用Physijs物理引擎

1. ??實現思路

  • 1、引入‘physi.js’，創建Physijs物理引擎三維場景scene，設置scene場景重力信息。
  • 2、初始化camera相機，定義相機位置 camera.position.set，設置相機方向camera.lookAt，場景scene添加camera。
  • 3、創建THREE.SpotLight聚光燈光源light，設置light位置，scene場景加入light。
  • 4、加載幾何模型：使用‘floor-wood.jpg’木紋貼圖創建地面網格對象ground以及四周突出邊框網格對象borderLeft、borderRight、borderTop、borderBottom，ground添加borderLeft、borderRight、borderTop、borderBottom。定義controls方法，內部定義addCubes方法用于添加物理碰撞立方體，定義addSpheres方法用于添加物理碰撞球體，定義clearMeshes方法用于清除添加的碰撞對象，定義碰撞物體restitution彈性形變和friction摩擦系數。定義render方法，實現ground的旋轉動畫。具體代碼參考下面代碼樣例。
  • 5、加入gui控制。加入stats監控器，監控幀數信息。

2. ??代碼樣例

<!DOCTYPE html>
<html>
<style>body {margin: 0;overflow: hidden;}
</style><head><title>學習threejs，使用Physijs物理引擎</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/physi.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/chroma.js"></script><script type="text/javascript">'use strict';//任務線程Physijs.scripts.worker = '../libs/physijs_worker.js';//內部庫ammo.jsPhysijs.scripts.ammo = '../libs/ammo.js';var scale = chroma.scale(['white', 'blue', 'red', 'yellow']);var initScene, render, applyForce, setMousePosition, mouse_position,ground_material, box_material,projector, renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];initScene = function () {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(new THREE.Color(0x000000));document.getElementById('viewport').appendChild(renderer.domElement);render_stats = new Stats();render_stats.domElement.style.position = 'absolute';render_stats.domElement.style.top = '1px';render_stats.domElement.style.zIndex = 100;document.getElementById('viewport').appendChild(render_stats.domElement);scene = new Physijs.Scene;scene.setGravity(new THREE.Vector3(0, -90, 0));camera = new THREE.PerspectiveCamera(35,window.innerWidth / window.innerHeight,1,1000);camera.position.set(80, 60, 80);camera.lookAt(scene.position);scene.add(camera);// Lightlight = new THREE.SpotLight(0xFFFFFF);light.position.set(20, 100, 50);scene.add(light);// Materialsground_material = Physijs.createMaterial(new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('../assets/textures/general/floor-wood.jpg')}),.9,.6);ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;ground_material.map.repeat.set(4, 8);// Groundground = new Physijs.BoxMesh(new THREE.BoxGeometry(60, 1, 130),ground_material,0);ground.receiveShadow = true;var borderLeft = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 6, 130),ground_material,0);borderLeft.position.x = -31;borderLeft.position.y = 2;ground.add(borderLeft);var borderRight = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 6, 130),ground_material,0);borderRight.position.x = 31;borderRight.position.y = 2;ground.add(borderRight);var borderBottom = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 6, 2),ground_material,0);borderBottom.position.z = 65;borderBottom.position.y = 2;ground.add(borderBottom);var borderTop = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 6, 2),ground_material,0);borderTop.position.z = -65;borderTop.position.y = 2;ground.add(borderTop)scene.add(ground);var meshes = [];var controls = new function () {//參數 restitution(彈性形變)和friction(摩擦系數)this.cubeRestitution = 0.4;this.cubeFriction = 0.4;this.sphereRestitution = 0.9;this.sphereFriction = 0.1;this.clearMeshes = function () {meshes.forEach(function (e) {scene.remove(e);});meshes = [];};this.addSpheres = function () {var colorSphere = scale(Math.random()).hex();for (var i = 0; i < 5; i++) {box = new Physijs.SphereMesh(new THREE.SphereGeometry(2, 20),Physijs.createMaterial(new THREE.MeshPhongMaterial({color: colorSphere,opacity: 0.8,transparent: truecontrols.sphereFriction,controls.sphereRestitution));box.position.set(Math.random() * 50 - 25,20 + Math.random() * 5,Math.random() * 50 - 25);meshes.push(box);scene.add(box);}};this.addCubes = function () {var colorBox = scale(Math.random()).hex();for (var i = 0; i < 5; i++) {box = new Physijs.BoxMesh(new THREE.BoxGeometry(4, 4, 4),Physijs.createMaterial(new THREE.MeshPhongMaterial({color: colorBox,opacity: 0.8,transparent: truecontrols.cubeFriction,controls.cubeRestitution));box.position.set(Math.random() * 50 - 25,20 + Math.random() * 5,Math.random() * 50 - 25);box.rotation.set(Math.random() * Math.PI * 2,Math.random() * Math.PI * 2,Math.random() * Math.PI * 2);meshes.push(box);scene.add(box);}}};var gui = new dat.GUI();gui.add(controls, 'cubeRestitution', 0, 1);gui.add(controls, 'cubeFriction', 0, 1);gui.add(controls, 'sphereRestitution', 0, 1);gui.add(controls, 'sphereFriction', 0, 1);gui.add(controls, 'addCubes');gui.add(controls, 'addSpheres');gui.add(controls, 'clearMeshes');requestAnimationFrame(render);scene.simulate();};var stepX;var direction = 1;render = function () {requestAnimationFrame(render);renderer.render(scene, camera);render_stats.update();ground.rotation.x += 0.002 * direction;if (ground.rotation.x < -0.4) direction = 1;if (ground.rotation.x > 0.4) direction = -1;ground.__dirtyRotation = true;scene.simulate(undefined, 1);};window.onload = initScene;</script>
</head><body>
<div id="viewport"></div>
</body></html>

效果如下：
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/79345.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/79345.shtml
英文地址，請注明出處：http://en.pswp.cn/web/79345.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

ARCGIS PRO DSK 選擇坐標系控件（CoordinateSystemsControl ）的調用

ARCGIS PRO DSK 選擇坐標系控件（CoordinateSystemsControl ）的調用

在WPF窗體上使用 xml&#xff1a;加入空間命名引用 xmlns:mapping"clr-namespace:ArcGIS.Desktop.Mapping.Controls;assemblyArcGIS.Desktop.Mapping" 在控件區域加入&#xff1a; <mapping:CoordinateSystemsControl x:Name"CoordinateSystemsControl&q…
閱讀更多...
LangGraph(三)——添加記憶

LangGraph(三)——添加記憶

目錄 1. 創建MemorySaver檢查指針2. 構建并編譯Graph3. 與聊天機器人互動4. 問一個后續問題5. 檢查State參考 1. 創建MemorySaver檢查指針 創建MemorySaver檢查指針&#xff1a; from langgraph.checkpoint.memory import MemorySavermemory MemorySaver()這是位于內存中的檢…
閱讀更多...
深入理解Mysql

深入理解Mysql

BufferPool和Changebuffer是如何加快讀寫速度的? BufferPool 在Mysql啟動的時候 Mysql會申請連續的空間來存儲BufferPool 每個頁16kb 當控制塊不足以存儲信息的時候就會向后申請一個新的頁 每個控制塊都對應了一個緩存頁 控制塊占chunk的百分之5左右 LRU鏈表 Changebuffer …
閱讀更多...
Python核心編程深度解析：作用域、遞歸與匿名函數的工程實踐

Python核心編程深度解析：作用域、遞歸與匿名函數的工程實踐

引言 Python作為現代編程語言的代表&#xff0c;其作用域管理、遞歸算法和匿名函數機制是構建高質量代碼的核心要素。本文基于Python 3.11環境&#xff0c;結合工業級開發實踐&#xff0c;深入探討變量作用域的內在邏輯、遞歸算法的優化策略以及匿名函數的高效應用&#xff0c…
閱讀更多...
《用MATLAB玩轉游戲開發》貪吃蛇的百變玩法：從命令行到AI對戰

《用MATLAB玩轉游戲開發》貪吃蛇的百變玩法：從命令行到AI對戰

《用MATLAB玩轉游戲開發&#xff1a;從零開始打造你的數字樂園》基礎篇&#xff08;2D圖形交互&#xff09;-&#x1f40d; 貪吃蛇的百變玩法&#xff1a;從命令行到AI對戰 &#x1f3ae; 歡迎來到這篇MATLAB貪吃蛇編程全攻略&#xff01;本文將帶你從零開始&#xff0c;一步步…
閱讀更多...
Android平臺FFmpeg音視頻開發深度指南

Android平臺FFmpeg音視頻開發深度指南

一、FFmpeg在Android開發中的核心價值 FFmpeg作為業界領先的多媒體處理框架&#xff0c;在Android音視頻開發中扮演著至關重要的角色。它提供了&#xff1a; 跨平臺支持&#xff1a;統一的API處理各種音視頻格式完整功能鏈&#xff1a;從解碼、編碼到濾鏡處理的全套解決方案靈…
閱讀更多...
AI大模型驅動的智能座艙研發體系重構

AI大模型驅動的智能座艙研發體系重構

隨著AI大模型&#xff08;如LLM、多模態模型&#xff09;的快速發展&#xff0c;傳統智能座艙研發流程面臨巨大挑戰。傳統座艙研發以需求驅動、功能固定、架構封閉為特點&#xff0c;而AI大模型的引入使得座艙系統向自主決策、動態適應、持續進化的方向發展。 因此思考并提出一…
閱讀更多...
Day20 常見降維算法分析

Day20 常見降維算法分析

一、常見的降維算法 LDA線性判別PCA主成分分析t-sne降維 二、降維算法原理 2.1 LDA 線性判別 原理 &#xff1a;LDA&#xff08;Linear Discriminant Analysis&#xff09;線性判別分析是一種有監督的降維方法。它的目標是找到一個投影方向&#xff0c;使得不同類別的數據在…
閱讀更多...
Python----機器學習（模型評估：準確率、損失函數值、精確度、召回率、F1分數、混淆矩陣、ROC曲線和AUC值、Top-k精度）

Python----機器學習（模型評估：準確率、損失函數值、精確度、召回率、F1分數、混淆矩陣、ROC曲線和AUC值、Top-k精度）

一、模型評估 1. 準確率&#xff08;Accuracy&#xff09;&#xff1a;這是最基本的評估指標之一&#xff0c;表示模型在測試集上正確 分類樣本的比例。對于分類任務而言&#xff0c;準確率是衡量模型性能的直觀標準。 2. 損失函數值&#xff08;Loss&#xff09;&#xff1…
閱讀更多...
cdn 是什么？

cdn 是什么？

內容分發網絡&#xff0c;Content Delivery Network 介紹 CDN&#xff08;Content Delivery Network&#xff09;是一種將內容分發到靠近用戶的邊緣服務器&#xff0c;以加速訪問速度、減少延遲、降低源站壓力的網絡系統。 CDN 把網站的靜態資源&#xff08;如 HTML、JS、CSS、…
閱讀更多...
BUCK基本原理學習總結-20250509

BUCK基本原理學習總結-20250509

一、電感伏秒平衡特性 處于穩定狀態的電感，開關導通時間（電流上升段）的伏秒數須與開關關斷（電流下降段）時的伏秒數在數值上相等，盡管兩者符號相反。這也表示，繪出電感電壓對時間的曲線，導通時段曲線的面積必須等于關斷時段曲線的面積。 二、BUCK的基本概念和原理 基…
閱讀更多...
【K8S系列】Kubernetes常用 命令

【K8S系列】Kubernetes常用 命令

以下為的 Kubernetes 超全常用命令文檔&#xff0c;涵蓋集群管理、資源操作、調試排錯等核心場景&#xff0c;結合示例與解析&#xff0c; 高效運維 Kubernetes 環境。 一、集群與節點管理 1. 集群信息查看 查看集群基本信息kubectl cluster-info # 顯示API Server、DNS等核…
閱讀更多...
【Django】REST 常用類

【Django】REST 常用類

ModelSerializer serializers.ModelSerializer 是 Django REST framework&#xff08;DRF&#xff09;里的一個強大工具&#xff0c;它能極大簡化序列化和反序列化 Django 模型實例的流程。下面從多個方面詳細介紹它&#xff1a; 1. 基本概念 序列化是把 Django 模型實例轉化…
閱讀更多...
GuassDB如何創建兼容MySQL語法的數據庫

GuassDB如何創建兼容MySQL語法的數據庫

GaussDB簡介 GaussDB是由華為推出的一款全面支持OLTP和OLAP的分布式關系型數據庫管理系統。它采用了分布式架構和高可靠性設計&#xff0c;可以滿足大規模數據存儲和處理的需求。GaussDB具有高性能、高可靠性和可擴展性等特點&#xff0c;適用于各種復雜的業務場景&#xff0c…
閱讀更多...
【無標題】I/O復用（epoll）三者區別▲

【無標題】I/O復用（epoll）三者區別▲

一、SOCKET-IO復用技術 定義&#xff1a;SOCKET - IO復用技術是一種高效處理多個套接字&#xff08;socket&#xff09;的手段&#xff0c;能讓單個線程同時監聽多個文件描述符&#xff08;如套接字&#xff09;上的I/O事件&#xff08;像可讀、可寫、異常&#xff09;&#x…
閱讀更多...
spring中的@Qualifier注解詳解

spring中的@Qualifier注解詳解

1. 核心作用 Qualifier是Spring框架中用于解決依賴注入歧義性的關鍵注解。當容器中存在多個相同類型的Bean時&#xff0c;Autowired默認按類型自動裝配會拋出NoUniqueBeanDefinitionException異常&#xff0c;此時通過Qualifier指定Bean的唯一標識符&#xff08;名稱或自定義限…
閱讀更多...
Python爬蟲實戰：獲取文學網站四大名著并保存到本地

Python爬蟲實戰：獲取文學網站四大名著并保存到本地

一、引言 1.1 研究背景 中國古典四大名著承載著深厚的文化底蘊，是中華民族的寶貴精神財富。在互聯網時代，網絡文學資源雖豐富多樣，但存在分散、質量參差不齊等問題 。部分文學網站存在訪問限制、資源缺失等情況，用戶難以便捷獲取完整、高質量的經典著作內容。開發專業的爬…
閱讀更多...
【一】瀏覽器的copy as fetch和copy as bash的區別

【一】瀏覽器的copy as fetch和copy as bash的區別

瀏覽器的copy as fetch和copy as bash的區別 位置&#xff1a;devTools->network->請求列表右鍵 copy as fetch fetch("https://www.kuaishou.com/graphql", {"headers": {"accept": "*/*","accept-language": &qu…
閱讀更多...
渠道銷售簡歷模板范文

渠道銷售簡歷模板范文

模板信息 簡歷范文名稱&#xff1a;渠道銷售簡歷模板范文&#xff0c;所屬行業&#xff1a;其他 | 職位&#xff0c;模板編號&#xff1a;KRZ3J3 專業的個人簡歷模板&#xff0c;邏輯清晰&#xff0c;排版簡潔美觀&#xff0c;讓你的個人簡歷顯得更專業&#xff0c;找到好工作…
閱讀更多...
Java大數據可視化在城市空氣質量監測與污染溯源中的應用：GIS與實時數據流的技術融合

Java大數據可視化在城市空氣質量監測與污染溯源中的應用：GIS與實時數據流的技術融合

隨著城市化進程加速&#xff0c;空氣質量監測與污染溯源成為智慧城市建設的核心議題。傳統監測手段受限于數據離散性、分析滯后性及可視化能力不足&#xff0c;難以支撐實時決策。2025年4月27日發布的《Java大數據可視化在城市空氣質量監測與污染溯源中的應用》一文&#xff0c…
閱讀更多...
最新文章

Copyright @ 2022~2023