Three.js教程:三维坐标系
推荐:将 NSDT场景编辑器 加入你的3D工具链
其他系列工具: NSDT简石数字孪生
三维坐标系
本节课的目的就是为了加强大家对threejs三维空间的认识。
辅助观察坐标系
THREE.AxesHelper()
的参数表示坐标系坐标轴线段尺寸大小,你可以根据需要改变尺寸。
// AxesHelper:辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
材质半透明设置
设置材质半透明,这样可以看到坐标系的坐标原点。
const material = new THREE.MeshBasicMaterial({color: 0x0000ff, //设置材质颜色transparent:true,//开启透明opacity:0.5,//设置透明度
});
AxesHelper
的xyz轴
three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴,对于three.js的3D坐标系默认y轴朝上。
设置模型在坐标系中的位置或尺寸
通过模型的位置、尺寸设置,加深3D坐标系的概念。
测试:设置长方体xyz不同方向尺寸
// 设置几何体长宽高,也就是x、y、z三个方向的尺寸
//对比三个参数分别对应xyz轴哪个方向
new THREE.BoxGeometry(100, 60, 20);
测试:改变位置
// 设置模型mesh的xyz坐标
mesh.position.set(100,0,0);
改变相机参数——预览新的渲染效果
你可以尝试源码中改变相机的参数,看看场景中的物体渲染效果怎么变化。
相机放在x轴负半轴,目标观察点是坐标原点,这样相当于相机的视线是沿着x轴正方向,只能看到长方体的一个矩形平面。
camera.position.set(-1000, 0, 0);
camera.lookAt(0, 0, 0);
// 相机视线沿着x轴负半轴,mesh位于相机后面,自然看不到
camera.position.set(-1000, 0, 0);
camera.lookAt(-2000, 0, 0);
相机far偏小,mesh位于far之外,物体不会显示在画布上。
// const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// 你可以进行下面测试,改变相机参数,把mesh放在视锥体之外,看看是否显示
// 3000改为300,使mesh位于far之外,mesh不在视锥体内,被剪裁掉
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 300);
3D建模学习工作室
上一篇:Three.js教程:渲染器 (mvrlink.com)
下一篇:Three.js教程:光源对物体表面影响 (mvrlink.com)
Three.js教程:三维坐标系相关推荐
- Vue+Three.js+Rhino三维建模研究学习
作者:saint37 链接:https://www.jianshu.com/p/66bfd791e85a 最近在研究三维可视化,发现了一堆奇怪的问题,我好菜啊我怎么这么菜,记录一下过程和一些坑. Th ...
- 使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果 废话不多说,直接先来看下最终实现的动态立体墙效果图. 如果图片还不够直观,那么点击链接查看在线示例. 首先我们需要用到ArcG ...
- cesium 三维坐标系绘制
cesium 三维坐标系绘制 ------ 本文为讲解+源码形式,本文将三维坐标系分解成六部来为大家大接,每一步都有源码和介绍,每行代码都有标注来讲解该步骤 一.绘制思路讲解 所需要的数据为,开始经纬 ...
- xyz三维坐标系怎么画?
坐标系统是描述物质存在的空间位置(坐标)的参照系,通过定义特定基准及其参数形式来实现.通过课本上的介绍,我们知道坐标系分为平面坐标系和三维坐标系,平面坐标系是很好画的,一般都是直角坐标系,那么三维坐标 ...
- Vue+Three.js实现三维管道可视化及流动模拟
最近在研究Geotoolkit过程中,发现很多三维的应用场景,用其实现起来比较复杂,就开展了利用Three.js实现海底管道流动的模拟. 推荐一个学习地址:Three.js教程,这这里的学习示例基本上 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- 判断三维坐标系旋转正方向的简单方法
引言 做iOS开发,不免要接触到一些特效,其中不乏3D特效,这时候就要对iOS所使用的坐标系了解才行.若不限于iOS开发,还有MacOS开发,若不知道它们所使用坐标系的不同,初学者会很容易陷于混乱, ...
- Vue.js教程视频
Vue.js教程视频链接 https://www.bilibili.com/video/av32611687/?p=1 https://www.bilibili.com/video/av3261168 ...
- 10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
最新文章
- 高逼格的画图:VIM原来可以这样玩
- ITK:计算网格的平面参数化
- [原]关于在 iOS 中支持 DLNA
- Ansible安装及配置
- ASP.NET在类中引用Application和Server.MapPath
- php5.4全局变量,PHP 5 全局变量 - 超全局变量
- element 让日期选择器一直显示选择面板
- C#用SqlCilent模式连接数据库实例
- java简单的小程序_编写一个简单的入门java小程序
- 【系统辨识】初识系统辨识,学习这个的目的
- 小数分频器vhdl实现_verilog 实现小数分频(小数分频器)代码
- windows下网络诊断基本命令
- AI智能润色改写,伪原创写作工具,毕业论文必备工具
- 如何把pdf翻译成中文?
- 从开发角度读懂公司卫生间一直有人窜稀的原理
- 如何创建一个SpringBoot项目
- 多宫格视频是什么软件_抖音上的四/多宫格视频是怎么做出来的?多宫格视频一个接一个播放的制作技巧...
- STM32F405驱动WS2812E灯珠灯带代码
- Nature调查 | 85%硕博生存在财务危机,近一半或因此放弃学业
- 【ML】自动编码器结合逻辑回归用于分类预测(数据+代码详细教程)
热门文章
- 中国电信2016年IT研发工程师笔试题
- python3-多个装饰器的执行顺序
- IRIS 2021 技术文档 First Look 12--技术概要:.NET Object Persistence with XEP
- Michael Tinkham《Introduction to Superconductivity (2nd)》(迈克尔·廷哈姆《超导电性导论(第二版)》)中文目录
- 报童问题求解最大利润_数据分析案例:用数学建模和仿真模拟解决供求矛盾问题...
- 一建通过率竟这么低,其实是算错了,这样算更有道理!
- 支付宝账单的背后,大数据时代“芳华”隐现
- 周跳探测方法之MW组合法
- 据说 PayPal 也要实行大小周了!一周休 2 天,一周休 3 天?
- 【python】利用广播星历计算BDS卫星的位置