学习threejs,THREE.PlaneGeometry 二维平面几何体

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️HREE.PlaneGeometry 二维平面几何体
  • 二、🍀创建 THREE.PlaneGeometry 二维平面几何体
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中创建THREE.PlaneGeometry 二维平面几何体,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️HREE.PlaneGeometry 二维平面几何体

HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数:
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — (可选)平面的宽度分段数,默认值是1。
heightSegments — (可选)平面的高度分段数,默认值是1。
属性:
.parameters
一个包含着构造函数中每个参数的对象。在对象实例化之后,对该属性的任何修改都不会改变这个几何体。

二、🍀创建 THREE.PlaneGeometry 二维平面几何体

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene。
  • 3、初始化PerspectiveCamera透视相机camera,定义相机位置 camera.position,设置相机方向camera.lookAt。
  • 4、初始化THREE.SpotLight聚光灯光源spotLight,设置spotLight的位置信息,场景scene中添加spotLight。
  • 5、加载几何模型:创建THREE.MeshNormalMaterial法向量材质meshMaterial,创建THREE.MeshBasicMaterial基础材质wireFrameMat,设置wireFrameMat基础材质的线框wireframe为true,通过THREE.SceneUtils.createMultiMaterialObject方法传入THREE.PlaneGeometry平面几何体geom和meshMaterial、wireFrameMat材质等参数创建平面几何体网格组plane,scene场景中添加plane。具体代码参考代码样例。
  • 6、加入gui控制,控制创建的几何平面宽高以及宽高分段数。加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>THREE.PlaneGeometry 二维平面几何体</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/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><script type="text/javascript">function init() {var stats = initStats();var scene = new THREE.Scene();// create a camera, which defines where we're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the sizevar webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));// add the sphere to the scenescene.add(plane);// position and point the camera to the center of the scenecamera.position.x = -20;camera.position.y = 30;camera.position.z = 40;camera.lookAt(new THREE.Vector3(10, 0, 0));// add spotlight for the shadowsvar spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);// call the render functionvar step = 0;// setup the control guivar controls = new function () {// we need the first child, since it's a multimaterialthis.width = plane.children[0].geometry.parameters.width;this.height = plane.children[0].geometry.parameters.height;this.widthSegments = plane.children[0].geometry.parameters.widthSegments;this.heightSegments = plane.children[0].geometry.parameters.heightSegments;this.redraw = function () {// remove the old planescene.remove(plane);// create a new oneplane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));// add it to the scene.scene.add(plane);};};var gui = new dat.GUI();gui.add(controls, 'width', 0, 40).onChange(controls.redraw);gui.add(controls, 'height', 0, 40).onChange(controls.redraw);gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);render();function createMesh(geom) {// assign two materialsvar meshMaterial = new THREE.MeshNormalMaterial();meshMaterial.side = THREE.DoubleSide;var wireFrameMat = new THREE.MeshBasicMaterial();wireFrameMat.wireframe = true;// create a multimaterialvar plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);return plane;}function render() {stats.update();plane.rotation.y = step += 0.01;// render using requestAnimationFramerequestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下:
在这里插入图片描述

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

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

相关文章

SpringCloud 入门(4)—— 网关

上一篇&#xff1a;SpringCloud 入门&#xff08;3&#xff09;—— Nacos配置中心-CSDN博客 Spring Cloud Gateway 作为 Spring Cloud 生态系统的一部分&#xff0c;主要在微服务架构中充当 API 网关的角色。它提供了统一的入口点来处理所有的 HTTP 请求&#xff0c;并将这些请…

石岩基督教福音堂

周末娃&#xff0c;娃的阿婆和我一起去石岩基督教福音堂做礼拜。 这是我第一次进入石岩的教堂。教堂很高。应该有3,4层楼高。 这周末做礼拜的人很多一楼人满了&#xff0c;阿婆去二楼做礼拜&#xff0c;娃和我去三楼的儿童室。很多家长楼下做礼拜&#xff0c;小朋友被安排三楼…

论文《Vertical Federated Learning: Concepts, Advances, and Challenges》阅读

论文《Vertical Federated Learning: Concepts, Advances, and Challenges》阅读 论文概况纵向联邦VFL框架介绍问题定义VFL 训练协议 对通信效率的优化对性能的优化自监督方案&#xff08;Self-Supervised Approaches&#xff09;半监督方案&#xff08;Semi-Supervised Approa…

如何用gpt来分析链接里面的内容(比如分析论文链接)和分析包含多个文件中的一块代码

如何用gpt来分析链接里面的内容&#xff0c;方法如下 这里使用gpt4里面有一个网路的功能 点击搜索框下面这个地球的形状即可启动搜索网页模式 然后即可提出问题在搜索框里&#xff1a;发现正确识别和分析了链接里面的内容 链接如下&#xff1a;https://arxiv.org/pdf/2009.1…

本地部署webrtc应用怎么把http协议改成https协议?

环境&#xff1a; WSL2 Ubuntu22.04 webrtc视频聊天应用 问题描述&#xff1a; 本地部署webrtc应用怎么把http协议改成https协议&#xff1f; http协议在安卓手机浏览器上用不了麦克风本&#xff0c;来地应用webrtc 本来是http协议&#xff0c;在安卓手机上浏览器不支持使…

面向未来的教育技术:智能成绩管理系统的开发

3.1 可行性研究 成绩管理系统开发实现分析需要从不同的角度来进行分析可行性&#xff0c;比如从时间角度&#xff0c;经济角度&#xff0c;甚至操作角度。从不同的角度分析可行性会让成绩管理系统开发具体化&#xff0c;进而达到辩证开发的正确性。 3.1.1 经济可行性 从经济方面…

zabbix监控山石系列Hillstone监控模版(适用于zabbix7及以上)

监控项&#xff1a; 触发器&#xff1a; 监控数据如下&#xff1a;

UE5 渲染管线 学习笔记

兰伯特 SSS为散射的意思 带Bias的可以根据距离自动切换mip的卷积值 而带Level的值mipmaps的定值 #define A8_SAMPLE_MASK .a 这样应该就很好理解了 这个只采样a通道 带Level的参考上面的 朝左上和右下进行模糊 带Bias参考上面 随机数 4D 3D 2D 1D

ArcGIS Pro 3.4新功能3:空间统计新特性,基于森林和增强分类与回归,过滤空间自相关

目录 应用 1&#xff1a;它是相关性还是托布勒第一定律&#xff1f; 应用 2&#xff1a;将空间带入非空间模型 结论 在 ArcGIS Pro 3.4 中&#xff0c;我们在新的空间组件实用程序&#xff08;Moran 特征向量&#xff09;工具集中发布了一个新工具 - 从字段过滤空间自相关。…

【微信小程序】2|轮播图 | 我的咖啡店-综合实训

轮播图 引言 在微信小程序中&#xff0c;轮播图是一种常见的用户界面元素&#xff0c;用于展示广告、产品图片等。本文将通过“我的咖啡店”小程序的轮播图实现&#xff0c;详细介绍如何在微信小程序中创建和管理轮播图。 轮播图数据准备 首先&#xff0c;在home.js文件中&a…

vue3封装而成的APP ,在版本更新后,页面显示空白

一、问题展示 更新之后页面空白&#xff0c;打不开 &#xff0c;主要是由于缓存造成的 二、解决办法 1、随机数代码实现 使用随机数来动态的生成静态资源目录名可以避免浏览器缓存&#xff0c;但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大&#xff0c;可…

JAVA HTTP压缩数据

/*** 压缩数据包** param code* param data* param resp* throws IOException*/protected void writeZipResult(int code, Object data, HttpServletResponse resp) throws IOException {resp.setHeader("Content-Encoding", "gzip");// write到客户端resp…

京东零售数据可视化平台产品实践与思考

导读 本次分享题目为京东零售数据可视化平台产品实践与思考。 主要包括以下四个部分&#xff1a; 1. 平台产品能力介绍 2. 业务赋能案例分享 3. 平台建设挑战与展望 作者&#xff1a;梁臣 京东 数据产品架构师 01平台产品能力介绍 1. 产品矩阵 数据可视化产品是一种利用…

springBoot Maven 剔除无用的jar引用

目录 Used undeclared dependencies found Unused declared dependencies found 当项目经过一段时间的开发和维护后&#xff0c;经常会遇到项目打包速度变慢的问题。这通常与项目中包含大量的jar依赖有关&#xff0c;这些依赖之间的关系错综复杂。这种情况在项目维护过程中是…

Apache RocketMQ 5.1.3安装部署文档

官方文档不好使&#xff0c;可以说是一坨… 关键词&#xff1a;Apache RocketMQ 5.0 JDK 17 废话少说&#xff0c;开整。 1.版本 官网地址&#xff0c;版本如下。 https://rocketmq.apache.org/download2.配置文件 2.1namesrv端口 在ROCKETMQ_HOME/conf下 新增namesrv.pro…

uniapp Native.js原生arr插件服务发送广播到uniapp页面中

前言 最近搞了个设备&#xff0c;需求是读取m1卡&#xff0c;厂家给了个安卓原生demo&#xff0c;接入arr插件如下&#xff0c;接入后发现还是少了一部分代码&#xff0c;设备服务调起后触发刷卡无法发送到uniapp里。 中间是一些踩坑记录&#xff0c;最后面是解决办法&#xf…

实践KDTS-WEB从mysql迁移到kingbasev9

数据库国产化替代数据迁移是一个复杂且关键的过程。这涉及到将原有数据库中的数据准确、完整地迁移到新的国产数据库中&#xff0c;同时确保数据的完整性和一致性。人大金仓提供了强大的数据库迁移工具&#xff08;KDTS&#xff09;对同构、异构数据库数据迁移&#xff1b; 数…

nmap扫描优化

扫描优化用来提高扫描效率。当描一个大范围网络中的主机时&#xff0c;如果使用通用的方法可能需要很长的时间&#xff0c;此时可以使用一些特定选项进行扫描优化&#xff0c;以提高扫描效率。Nmap提供了几种优化方式&#xff0c;如分组扫描、设置发包方式和超时时间等。 分组…

mysql 查询优化之字段建立全文索引

最近在接手一些老项目时发现表设计存在问题导致查询较慢 例如一张旧表的设计&#xff1a; 模糊匹配某个关键字时,需要十几秒左右,而且表的数据量不多 都知道mysql8.0版本InnoDB引擎都支持全文索引了,因此可以在content建立全文索引&#xff0c;但全文索引对中文支持并不完善…

Selenium 和 Playwright两大框架的不同之处

自动化测试工具百花齐放&#xff0c;其中 Selenium 和 Playwright 是两大热门框架&#xff0c;谁才是你的最佳选择&#xff1f;面对企业项目的真实需求&#xff0c;它们的差异究竟在哪儿&#xff1f; Selenium 和 Playwright 是两种流行的自动化测试工具&#xff0c;它们都被用…