当前位置： 首页 > news >正文

Threejs之相机基础

news 2026/3/30 9:54:00

参考资料

  • 正投影相机
  • …
  • 相机控件MapControls

知识点

注：基于Three.jsv0.155.0

  • 正投影相机
  • 正投影相机-Canvas尺寸变化
  • 包围盒Box3
  • 地图案例(包围盒、正投影)
  • 相机动画(.position和.lookAt())
  • 不同方向的投影视图
  • 旋转渲染结果(.up相机上方向)
  • 管道漫游案例
  • OrbitControls旋转缩放限制
  • 相机控件MapControls

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { MapControls } from 'three/addons/controls/MapControls.js';const width = window.innerWidthconst height = window.innerHeight// 场景const scene = new THREE.Scene();const data = [[110.3906, 34.585],[110.8301, 34.6289],[111.1816, 34.8047],[111.5332, 34.8486],[111.7969, 35.0684],[112.0605, 35.0684],[112.0605, 35.2881],[112.7637, 35.2002],[113.1152, 35.332],[113.6426, 35.6836],[113.7305, 36.3428],[114.873, 36.123],[114.9609, 36.0791],[115.1367, 36.2109],[115.3125, 36.0791],[115.4883, 36.167],[115.3125, 35.8154],[116.1035, 36.0791],[115.4883, 35.7275],[115.2246, 35.4199],[115.0488, 35.376],[114.7852, 35.0684],[115.4004, 34.8486],[115.5762, 34.585],[116.1914, 34.585],[116.1914, 34.4092],[116.543, 34.2773],[116.6309, 33.9258],[116.1914, 33.7061],[116.0156, 33.9697],[115.6641, 34.0576],[115.5762, 33.9258],[115.5762, 33.6621],[115.4004, 33.5303],[115.3125, 33.1787],[114.873, 33.1348],[114.873, 33.0029],[115.1367, 32.8711],[115.2246, 32.6074],[115.5762, 32.4316],[115.8398, 32.5195],[115.9277, 31.7725],[115.4883, 31.6846],[115.4004, 31.4209],[115.2246, 31.4209],[115.1367, 31.5967],[114.7852, 31.4648],[114.6094, 31.5527],[114.5215, 31.7725],[114.1699, 31.8604],[113.9941, 31.7725],[113.8184, 31.8604],[113.7305, 32.4316],[113.4668, 32.2998],[113.2031, 32.4316],[112.3242, 32.3438],[111.5332, 32.6074],[111.0059, 33.2666],[111.0059, 33.5303],[110.6543, 33.8379],[110.6543, 34.1455],[110.4785, 34.2334],[110.3906, 34.585]]const pointsArr = [];// 一组二维向量表示一个多边形轮廓坐标data.forEach(function(e){// data坐标数据转化为Vector2构成的顶点数组const v2 = new THREE.Vector2(e[0],e[1])pointsArr.push(v2);})// Shape表示一个平面多边形轮廓,参数是二维向量构成的数组pointsArrconst shape = new THREE.Shape(pointsArr);// 多边形shape轮廓作为ShapeGeometry参数，生成一个多边形平面几何体const geometry = new THREE.ShapeGeometry(shape);// 生成一个平面网格模型const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: '#0000ff',side: THREE.DoubleSide}))// 设置模型位置mesh.position.set(0, 0, 0);// 添加模型到场景scene.add(mesh);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(200, 200, 200 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 1);scene.add( ambientLight );// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const s = 2.5;//控制left, right, top, bottom范围大小const k = width / height; //canvas画布宽高比const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);// const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 3000);// camera.position.set(300, 300, 300); // camera.lookAt(0, 0, 0); //指向坐标原点// 包围盒计算模型对象的大小和位置const box3 = new THREE.Box3();box3.expandByObject(mesh); // 计算模型包围盒const size = new THREE.Vector3();box3.getSize(size); // 计算包围盒尺寸console.log('模型包围盒尺寸',size);const center = new THREE.Vector3();box3.getCenter(center); // 计算包围盒中心坐标console.log('模型中心坐标1',center);const x = 113.51,y = 33.88;camera.position.set(x, y, 300);// 你可以看到模型相比原来上下颠倒  y坐标轴朝下camera.up.set(0,-1,0)camera.lookAt(x, y, 0);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);renderer.outputColorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间// const controls = new OrbitControls(camera, renderer.domElement);// controls.target.set(x, y, 0); //与lookAt参数保持一致// controls.update();//update()函数内会执行camera.lookAt(controls.target)// // 左右旋转范围// controls.minAzimuthAngle = -Math.PI/2;// controls.maxAzimuthAngle = Math.PI/2;// // Vector3 {x: -49.803731395661714, y: 146.90160246353028, z: 35.47368304973255}// // Vector3 {x: -11.970638355445846, y: -51.0801205834488, z: 0.7429414745816755}// // 渲染循环// let angle = 0; //用于圆周运动计算的角度值// const R = 100; //相机圆周运动的半径// function render() {//     angle += 0.01;//     // 相机y坐标不变，在XOZ平面上做圆周运动//     camera.position.x = R * Math.cos(angle);//     camera.position.z = R * Math.sin(angle);//     renderer.render(scene, camera);//     camera.lookAt(0,0,0);//     // console.log('🚀 ~ file: 6.加载外部三维模型.html:70 ~ render ~ camera:', camera.position) // 鼠标左键改变相机位置//     // console.log('🚀 ~ file: 6.加载外部三维模型.html:66 ~ controls:', controls.target) // 鼠标右键改变相机观察点//     requestAnimationFrame(render);// }// // render();// 控制器// controls.addEventListener('change', () => {//   // 因为动画渲染了，所以这里可以省略//   renderer.render(scene, camera);// });const controls = new MapControls(camera, renderer.domElement);controls.addEventListener('change', function () {// 鼠标右键旋转时候，查看.position变化// 鼠标左键拖动的时候，查看.position、.target的位置会变化console.log('camera.position',camera.position);console.log('controls.target',controls.target);});</script>
</html>

相关文章：

Threejs之相机基础

参考资料 正投影相机…相机控件MapControls 知识点 注&#xff1a;基于Three.jsv0.155.0 正投影相机正投影相机-Canvas尺寸变化包围盒Box3地图案例(包围盒、正投影)相机动画(.position和.lookAt())不同方向的投影视图旋转渲染结果(.up相机上方向)管道漫游案例OrbitControls…...

编程日记 2023/12/14 23:32:28

2024SIA上海国际轴承工业展览会 ▎参行业盛会 展轴研风采

2024SIA上海国际轴承工业展览会 内容&#xff1a;1、轴承制品展区&#xff1a;2、轴承设备展区&#xff1a;3、轴承零件展区&#xff1a; 国际轴承展丨轴承工业展丨轴承装备展丨上海轴承展丨上海轴承工业展丨上海轴承装备展 2024上海国际轴承工业展览会将会于2024年7月24-26日…...

编程日记 2023/12/14 23:28:25

SQLMap介绍

预计更新SQL注入概述 1.1 SQL注入攻击概述 1.2 SQL注入漏洞分类 1.3 SQL注入攻击的危害 SQLMap介绍 2.1 SQLMap简介 2.2 SQLMap安装与配置 2.3 SQLMap基本用法 SQLMap进阶使用 3.1 SQLMap高级用法 3.2 SQLMap配置文件详解 3.3 SQLMap插件的使用 SQL注入漏洞检测 4.1 SQL注入…...

编程日记 2023/12/14 23:27:24

平头哥玄铁系列 RISC-V 芯片及开发板

1、玄铁 9 系列概述 玄铁 8 系列 基于C-SKY架构&#xff0c;玄铁 9 系列基于 RISC-V 架构。E 系列为 RISC-V 32 位&#xff0c;C 系列为 RISC-V 64 位。 E902&#xff1a;超低功耗 RSIC-V 架构处理器 E902 采用 2 级极简流水线兼容 RISC-V 架构且对执行效率等方面进行了增强&a…...

编程日记 2023/12/14 23:24:21

Android 删除浏览器导航页面修改默认主页

Android 删除浏览器导航页面修改默认主页 近来收到客户需求反馈&#xff0c;需要删除浏览器导航页面并将百度设置为默认主页&#xff0c;具体修改参照如下&#xff1a; 删除浏览器导航页面&#xff1a; /vendor/mediatek/proprietary/packages/apps/Browser/src/com/android…...

编程日记 2023/12/14 23:22:19

【Stm32-F407】Keil uVision5 下新建工程

①双击鼠标左键打开Keil uVision5&#xff0c;选择 Project 下的 New uVision Project &#xff1b; ②在期望的文件夹下创建一个工程&#xff0c;并按如下要求操作&#xff1b; ③添加文件类型&#xff0c;按如下要求操作 ④如有需要可添加相关启动文件在工程文件夹下并添加到…...

编程日记 2023/12/14 23:20:18

linux中文件服务器NFS和FTP服务

文件服务器 NFSNFS介绍配置nfs文件共享服务端客户端 FTPftp介绍FTP基础ftp主动模式ftp被动模式 Vsftp 服务器简介vsftpd配置安装vsftpd[ftp的服务端]编辑配置文件匿名用户设置创建本地用户使用ftp服务 客户端操作匿名用户登录本地用户登录lftp服务 NFS NFS介绍 文件系统级别共…...

编程日记 2023/12/14 23:17:15

茶室茶楼计时计费软件，软件中的商品管理计时操作教程

一、前言 茶室在营业的时候&#xff0c;不但需要计时间&#xff0c;同时还需要管理商品入库出库库存等管理。这就需要一款实用的操作简单的管理软件。 下面以 佳易王茶社计时计费软件V18.0为例说明&#xff0c;其他版本可以参考本教程。 软件下载或技术支持可以点击最下方官…...

编程日记 2023/12/14 23:16:14

从入门到精通：掌握Spring IOC/DI配置管理第三方bean的技巧

IOC/DI配置管理第三方bean 1.1 案例:数据源对象管理1.1.1 环境准备1.1.2 思路分析1.1.3 实现Druid管理步骤1:导入druid的依赖步骤2:配置第三方bean步骤3:从IOC容器中获取对应的bean对象步骤4:运行程序 1.1.4 实现C3P0管理步骤1:导入C3P0的依赖步骤2:配置第三方bean步骤3:运行程…...

编程日记 2023/12/14 23:15:14

Flink的容错机制

容错机制 容错&#xff1a;指出错后不影响数据的继续处理&#xff0c;并且恢复到出错前的状态。 检查点&#xff1a;用存档读档的方式&#xff0c;将之前的某个时间点的所有状态保存下来&#xff0c;故障恢复继续处理的结果应该和发送故障前完全一致&#xff0c;这就是所谓的检…...

编程日记 2023/12/14 23:14:13

GO设计模式——11、装饰器模式（结构型）

目录 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式的核心角色&#xff1a; 优缺点 使用场景 代码实现 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功…...

编程日记 2023/12/14 23:11:11

全志V3s之U-Boot

1、安装交叉编译器&#xff1a; ARM交叉编译器的官网&#xff1a;交叉编译器 a、使用wget下载&#xff1a; wget https://releases.linaro.org/components/toolchain/binaries/latest/arm-linux-gnueabihf/gcc-linaro-6.3.1-2017.05-x86_64_arm-linux-gnueabihf.tar.xzb、解…...

编程日记 2023/12/14 23:10:10

【华为OD】依据用户输入的单词前缀，从已输入的英文语句中联想出用户想输入的单词，按字典序输出联想到的单词序列

题目描述主管期望你来实现英文输入法单词联想功能需求如下:依据用户输入的单词前缀，从已输入的英文语句中联想出用户想输入的单词，按字典序输出联想到的单词序列，如果联想不到，请输出用户输入的单词前缀注意1.英文单词联想时，区分大小写2.缩略形式如"dont"，判定…...

编程日记 2023/12/14 23:09:09

CentOS 7.9安装宝塔面板，安装gitlab服务器

docker安装方式比较慢&#xff0c;安装包1.3GB 安装后启动很慢 docker logs q18qgztxdvozdv_gitlab-ce-gitlab-1 docker ps docker exec -it q18qgztxdvozdv_gitlab-ce-gitlab-1 sh cd /etc/gitlab cat initial_root_password 软件商店安装方式&#xff0c;失败了2023.12…...

编程日记 2023/12/14 23:06:07

AutoGen多代理对话项目示例和工作流程分析

在这篇文章中&#xff0c;我将介绍AutoGen的多个代理的运行。这些代理将能够相互对话&#xff0c;协作评估股票价格&#xff0c;并使用AmCharts生成图表。 我们创建对话的目的是要求代理分析特定公司的股票价格&#xff0c;并制作股票价格图表。 为了实现这一目标&#xff0c;…...

编程日记 2023/12/14 23:04:05

多维时序 | MATLAB实现RIME-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现RIME-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现RIME-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现RIME-CNN-…...

编程日记 2023/12/14 23:01:03

使用高防IP防护有哪些优势

高防IP是针对互联网服务器在遭受大流量的DDoS攻击后导致服务不可用的情况下&#xff0c;推出的付费增值服务&#xff0c;用户可以通过配置高防IP&#xff0c;将攻击流量引流到高防IP&#xff0c;确保源站的稳定可靠。高防IP相当于搭建完转发的服务器。 高防IP有两种接入方式&a…...

编程日记 2023/12/14 23:00:01

android-xml语法

xml解析器 Android的XML文件语法是由Android系统中的解析器解析的。具体来说&#xff0c;Android使用了一个名为"Android Asset Packaging Tool (AAPT)"的工具来解析和处理XML文件。AAPT负责将XML文件编译为二进制格式&#xff0c;并在构建过程中将其打包到Android应…...

编程日记 2023/12/14 22:59:01

【银行测试】第三方支付平台业务流，功能/性能/安全测试方法...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、第三方支付平台…...

编程日记 2023/12/14 22:58:00

全志V3s之显示当前文件路径

新移植的kernel和根文件系统&#xff0c;其终端显示只有一个#号&#xff0c;不方便查看&#xff0c;更改以下配置&#xff0c;使得可以显示全路径。修改如下&#xff1a; export PS1[\u\h \w]\$这个是即时生效的&#xff0c;所以如果要重启或者重新打开窗口也生效的话就要把这…...

编程日记 2023/12/14 22:56:59

Phi-3 Forest Laboratory日志分析与监控方案：使用Prometheus与Grafana

Phi-3 Forest Laboratory日志分析与监控方案&#xff1a;使用Prometheus与Grafana 你是不是也遇到过这种情况&#xff1f;部署好的Phi-3 Forest Laboratory模型服务&#xff0c;用着用着突然变慢了&#xff0c;或者干脆没响应了。用户抱怨&#xff0c;自己却一头雾水&#xff…...

编程新知 2026/3/30 9:49:56

如何完美解决MacBook触控板在Windows的三指拖动难题

如何完美解决MacBook触控板在Windows的三指拖动难题 【免费下载链接】ThreeFingersDragOnWindows Enables macOS-style three-finger dragging functionality on Windows Precision touchpads. 项目地址: https://gitcode.com/gh_mirrors/th/ThreeFingersDragOnWindows …...

编程新知 2026/3/30 9:37:52

STM32F411 USB声卡时钟同步优化与中文命名实战

1. STM32F411 USB声卡开发基础 第一次接触STM32F411的USB声卡开发时&#xff0c;我被它的简洁配置流程惊艳到了。用CubeMX生成代码&#xff0c;接上PCM5102A解码芯片&#xff0c;不到半小时就能让电脑识别出音频设备。但很快我就发现事情没那么简单——播放音乐时总会出现周期…...

编程新知 2026/3/30 8:55:35

运维实战：思科NAT配置全解析与典型场景应用

1. 为什么企业网络离不开NAT技术 想象一下你公司的内网有200台电脑&#xff0c;但ISP只分配了5个公网IP地址——这就是NAT技术大显身手的场景。作为网络工程师&#xff0c;我处理过太多类似案例&#xff0c;最夸张的一个客户用1个公网IP支撑了整个500人办公区的上网需求。 NA…...

编程新知 2026/3/30 8:31:27

MedGemma 1.5企业应用：三甲医院科研组如何用其加速文献摘要与机制推演

MedGemma 1.5企业应用&#xff1a;三甲医院科研组如何用其加速文献摘要与机制推演 1. 引言&#xff1a;当科研遇上AI助手 想象一下这个场景&#xff1a;深夜的医院科研办公室里&#xff0c;桌上堆满了待读的医学文献&#xff0c;电脑屏幕上同时打开了十几篇PDF。一位研究员正…...

编程新知 2026/3/30 8:21:25

宝藏分享！实用AI写教材工具，快速产出低查重专业教材！

AI写教材工具&#xff1a;提升创作效率的利器 在撰写教材的过程中&#xff0c;总会遇到一种令人沮丧的“慢节奏”。尽管框架与资料已经准备就绪&#xff0c;内容创作却常常陷入困境&#xff1a;一句话反复推敲数十分钟&#xff0c;还是觉得表达不够完美&#xff1b;章节间的衔…...

编程新知 2026/3/30 6:46:53

CLIP-GmP-ViT-L-14模型部署保姆级教程：从零开始的Docker环境配置

CLIP-GmP-ViT-L-14模型部署保姆级教程&#xff1a;从零开始的Docker环境配置 你是不是也对那些能看懂图片的AI模型感到好奇&#xff1f;比如&#xff0c;你上传一张猫的照片&#xff0c;AI不仅能认出是猫&#xff0c;还能告诉你这是橘猫&#xff0c;正在晒太阳。CLIP-GmP-ViT-…...

编程新知 2026/3/30 6:34:52

Qwen3-VL-4B-Instruct：多模态视觉语言模型的技术演进与实践指南

Qwen3-VL-4B-Instruct&#xff1a;多模态视觉语言模型的技术演进与实践指南 【免费下载链接】Qwen3-VL-4B-Instruct 项目地址: https://ai.gitcode.com/hf_mirrors/unsloth/Qwen3-VL-4B-Instruct 技术突破&#xff1a;重新定义多模态交互范式 Qwen3-VL-4B-Instruct作为…...

编程新知 2026/3/30 6:30:51

SNOMED CT入门指南：从概念、关系到数据文件，手把手带你理解这个医学术语标准

SNOMED CT技术解析&#xff1a;从数据结构到医疗信息系统的实战指南 在医疗信息化领域&#xff0c;数据标准化是打破信息孤岛的关键。当不同医院的电子病历系统使用各自独立的术语体系时&#xff0c;跨机构的数据交换就像一场没有翻译的多国会议——充满误解和低效。这正是SNOM…...

编程新知 2026/3/30 6:12:49

汽车UDS刷写避坑指南：从S32K144 Bootloader的链接文件到安全访问，这些细节你注意了吗？

汽车UDS刷写实战避坑手册&#xff1a;S32K144 Bootloader开发中的七个致命细节 当你在凌晨三点的实验室里盯着CANoe窗口不断跳出的NRC 31&#xff08;requestOutOfRange&#xff09;错误码时&#xff0c;会不会突然怀念用J-Link直接烧录的简单日子&#xff1f;UDS刷写就像汽车电…...

编程新知 2026/3/30 5:28:21