Threejs 实现3D 地图(01)创建基本场景
"d3": "^7.9.0",
"three": "^0.169.0",
"vue": "^3.5.10"
<script setup>
import { onMounted,ref } from 'vue'
import * as THREE from 'three'
import * as d3 from "d3"; //莫开托坐标 矫正地图坐标
import map from './constant/map.json'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 拿到页面的宽高
const width = window.innerWidth, height = window.innerHeight;// 创建场景
const scene = new THREE.Scene();
// 将背景颜色设置为白色
scene.background = new THREE.Color("#000000");// 创建相机
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
// 设置相机位置
camera.position.z = 1000;// // 辅助线 AxesHelper
const axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper );// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
//阻尼 更真实
controls.enableDamping = trueconst initGeom = () => {// 添加一个物体(测试是否显示)const geometry = new THREE.BoxGeometry( 200, 200,200 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const cube = new THREE.Mesh( geometry, material );scene.add( cube );
}// 渲染页面
const render = () => {// 将场景(scene)和摄像机(camera 加入进来)renderer.render(scene, camera)// 渲染下一帧的时候会调用render函数requestAnimationFrame(render)controls.update()
}const initLight = () => {// 基本光源const ambLight = new THREE.AmbientLight('#ffffff', 0.3)/*** 设置聚光灯相关的的属性*/const spotLight = new THREE.SpotLight(0xFFFFFF); // 聚光灯spotLight.position.set(40, 200, 10);spotLight.castShadow = true; // 只有该属性为true时,该点光源允许产生阴影,并且下列属性可用scene.add(ambLight, spotLight); // 向场景中添加光源
}onMounted(() => {// 添加物体到场景initGeom()// 渲染render()// 设置环境光initLight()// 将渲染加入到页面上document.body.appendChild(renderer.domElement);
})
</script><template><div id="info"></div>
</template><style scoped></style>
下一篇:Threejs 实现3D 地图(02)创建3d 地图-CSDN博客
相关文章:

Threejs 实现3D 地图(01)创建基本场景
"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" <script setup> import { onMounted,ref } from vue import * as THREE from three import * as d3 from "d3"; //莫开托坐标 矫正地图…...
snmpdelta使用说明
1.snmpdelta介绍 snmpdelta命令是用来获取下一个节点的OID的值。 2.snmpdelta安装 1.snmpdelta安装 命令: yum -y install net-snmp net-snmp-utils [root@logstash ~]# yum -y install net-snmp net-snmp-utils Loaded plugins: fastestmirror Loading mirror speeds f…...

Hadoop集群安装
集群规划 node01node02node03角色主节点从节点从节点NameNode√DataNode√√√ResourceManager√NodeManager√√√SecondaryNameNode√Historyserver√ 上传安装包到node01 解压到指定目录 tar -zxvf /bigdata/soft/hadoop-3.3.3.tar.gz -C /bigdata/server/ 创建软链接 cd…...
VuePress集成到Vue项目的方法
VuePress 可以作为一个独立的静态站点生成器来使用,也可以集成到现有的 Vue 项目中。以下是将 VuePress 集成到 Vue 项目的几种方法: 1. 作为本地依赖集成 如果你想在现有的 Vue 项目中使用 VuePress 来管理文档,你可以将 VuePress 安装为本…...
【ROS】ROS局域网下多机通讯方法
最近工作中需要用到多机通讯,这里稍微总结一下使用方法。 目录 一、网络配置 二、修改两个设备的hosts文件 三、修改两个ros设备的.bashrc 四、launch文件中给节点设定运行的设备 一、网络配置 首先确保两个ros设备连接到同一局域网下,然后查询两个…...
linux 系统怎么使用
Linux系统的使用涉及多个方面,包括文件管理、目录操作、用户管理、进程管理、网络配置等。以下是对Linux系统基础使用的详细介绍: 一、文件管理 查看文件和目录 ls:列出当前目录的内容。ls -l:以长格式列出当前目录的内容&#x…...
Java线程池知识点梳理
Java线程池知识点梳理 什么是线程池? 线程在系统中创建的成本是相对比较高的,所以使用”池化“的思想,设计线程池,有大量任务需要执行时,可以直接从线程池中使用已经创建好的线程直接去执行。减少线程的创建和销毁带…...

SFT、RLHF、DPO、IFT —— LLM 微调的进化之路_如何搭建自己的dpo
TL;DR • SFT、RLHF 和 DPO 都是先估计 LLMs 本身的偏好,再与人类的偏好进行对齐; • SFT 只通过 LLMs 生成的下一个单词进行估计,而 RLHF 和 DPO 通过 LLMs 生成的完整句子进行估计,显然后者的估计会更准确; • 虽然…...

CSS 选择器简单回顾
引言 当我们探讨网页设计和开发时, CSS(层叠样式表) 无疑是一个不可或缺的技术, 它使我们能够精确控制网页的外观和布局, 为用户创造出独特的视觉体验、以及良好的交互体验!! 而一个完整的 CSS 规则则是由两个主要部分组成: 选择器和声明块 那么今天我们就来盘点下常见的几种选…...
uniapp配置微信小程序分包(分包优化)
1.manifest.json中 源码视图中找到mp-weixin,新增代码"optimization":{"subPackages":true},如下图所示 "optimization" : {"subPackages" : true } 2.pages.json中 分包内静态文件示例 "subPackages&…...

MySQL-10.DML-添加数据insert
一.DML(INSERT) -- DDL:数据操作语言 -- DML:插入数据 - insert -- 1.为tb_emp表的username,name,gender字段插入值 insert into tb_emp (username,name,gender) values (wuji,无忌,1); -- 这样会报错,因为create_ti…...
ARM/Linux嵌入式面经(四八):tp-link联洲国际
文章目录 1. **模电基础**:请解释共射电路的工作原理,并描述如何计算其放大倍数。工作原理放大倍数计算面试官追问及回答2. **DCDC损耗**:有哪些方法可以降低DCDC转换器的损耗?3. **示波器使用**:如何用示波器正确测量DCDC的开关纹波?4. **IIC通信**:IIC通信协议中是否需…...

代码实践篇四 形状检测与规则重建
本节内容主要涉及形状检测(Shape Detection)与形状重建(Shape Reconstruction),具体算法步骤会在后续章节介绍。CGAL在6.0重点更新了形状重建部分的一些模块——动态空间分割与动态形状重建等,也会在后续详…...

JVM(HotSpot):GC之垃圾回收阶段
文章目录 前言一、标记清除算法(Mark Sweep)二、标记整理算法(Mark Compact)三、复制算法(Copy) 前言 标记出垃圾对象之后,就要进行清理。 那么,如何清理? 这里也有相应的算法。 主要有三种。 一、标记清除算法(Mark Sweep) 原理说明&…...

Go 项目如何集成类似mybatisPlus插件呢?GORM走起!!
导读: 在 Go 项目中,虽然没有像 MyBatis Plus 这样特定的 ORM 插件,但可以使用功能相似的 Go ORM 框架,比如 GORM,它支持链式查询、自动迁移、预加载等功能,与 MyBatis Plus 有相似之处。通过一些插件或扩…...

《深度学习》Dlib库 CNN卷积神经网络 人脸识别
目录 一、如何实现CNN人脸识别 1、CNN核心概念 1)卷积层 2)池化层 3)激活函数 4)全连接层 2、步骤 1)加载预训练的人脸识别模型 2)读取图像并检测人脸 3)提取人脸特征向量 4…...
滚雪球学Redis[7.1讲]:Redis实战案例
全文目录: 🎉前言🚦1. 使用Redis实现会话管理在Web应用中使用Redis管理会话会话过期与刷新策略安全性考虑与优化 🧩2. 使用Redis实现缓存系统缓存的基本原理Redis缓存的应用场景缓存失效策略与雪崩预防 ✨3. Redis在排行榜系统中的…...

WordPress外部图片本地化插件
一款用于本地化文章的外部图片的插件,支持如下功能: 文章发布前通过编辑器插件本地化 文章手动发布时自动本地化 文章定时发布时自动本地化 针对已发布的文章批量本地化。 源码下载:https://download.csdn.net/download/m0_66047725/898963…...

Linux基础-shell的简单实现
个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 Linux基础-shell的简单实现 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记,欢迎大家在评论区交流讨论💌 目录 1, 全局变…...

Tomcat日志文件详解及catalina.out日志清理方法
目录 前言1. Tomcat日志文件详解1.1 catalina.out1.2 localhost_access_log1.3 catalina.<date>.log1.4 host-manager.<date>.log 和 manager.<date>.log1.5 localhost.<date>.log 2. catalina.out文件管理与清理方法2.1 为什么不能直接删除catalina.o…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...

HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...

k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...