最新要闻
- 热文:构造柱的作用是什么_构造柱的作用
- 焦点热讯:网友称余额宝页面显示乱码 支付宝回应:正在修复 不影响资金安全
- 《龙马精神》电影中真打实摔 成龙:我69岁动作比你还快
- 热点!说十个需要送老婆礼物的节日
- 大阳睿能全新动力首款车型H12下线:电机1700W 续航150公里
- 249元 小米米家自动真空封口机发布:-70KPa大吸力
- 全球快资讯丨世界各地小孩的玩具对比:不止文化与财富的差距
- 当前动态:马斯克开源推特算法反被指责:隐藏重要细节、与承诺不符
- 【当前独家】《王者荣耀》S31赛季4月13日上线 新英雄姬小满来了
- 深圳开放大学优秀学生李德炎:保持学习状态,争做行业模范
- 速递!定价全球最低!国产科幻FPS《边境》国区售价68元起
- 天天观热点:孟羽童已不是董明珠秘书引热议 本人回应:很享受格力市场营销工作
- 今日看点:米粉换上Redmi Note 12 Turbo:陪伴他5年的小米6正式退役
- 天天即时看!网友看电影觉得难看成功退一半费用 影城:散场20分钟内可办理
- 电动自行车调速器网上公开售卖!专家:私改限速或引发燃爆事故
- 天天观天下!王者更新:祈愿夺宝重启,520传说天幕返场,5英雄喜提新衣
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
第135篇:Three.js基础入门
好家伙,这东西太帅了,我要学会
(相关资料图)
先放张帅图(都是用three.js做出来的,这我学习动力直接拉满)
还有另外一个
Junni is...
帧数太高,录不了
开始学习
官方文档
1.Three.js是什么?
Three.js是一款运行在浏览器中的 3D 引擎(基于WebGL的API的封装),你可以用它来创造你所需要的一系列3D动画场景,
2.安装,我们可以直接去到github上下载
选择要使用的版本
这里我们偷懒,直接用最方便的
<script type="module"> import * as THREE from "https://unpkg.com/three/build/three.module.js";</script>
更多安装方法
安装 – three.js docs (threejs.org)
3.上手
three.js三大要素
场景(scene)、相机(camera)、渲染器(renderer)
3.1.场景(scene)
我们把它抽象成一个什么都没的房间
哦,他建立在xyz轴坐标之上
场景允许在什么地方、摆放什么东西来交给three.js来进行渲染,场景也就是放置物体、灯光和相机的地方。
使用
const scene = new THREE.Scene(); // 创建场景
来创建一个新场景
3.2.相机(camera)
想象把你的眼球挖下来
想象有个相机来代替你的眼睛去"观察"这个场景
在场景中需要添加一个相机,相机用来确定观察位置、方向、角度,相机看到的内容,就是我们最终在屏幕上看到的内容。
可以远程控制相机移动,摄像机传给远程电脑上展示出来的画面,就是Threejs在屏幕上呈现的画面
使用:
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
来新建一个相机对象
参数:
来自Three.js基础入门(一) - 掘金 (juejin.cn)
3.3.渲染器(renderer)
渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。
Three.js中有很多种类的渲染器,例如webGLRenderer、canvasRenderer、SVGRenderer,通常使用的是WebGLRenderer渲染器。
使用
const renderer = new THREE.WebGLRenderer();
创建一个新的WebGLRenderer渲染器对象
4.画点东西
好了,我大概懂了,接下来我们来画点东西
来画官网的实例吧
My first three.js app <script type="module"> import * as THREE from "https://unpkg.com/three/build/three.module.js"; //新建场景对象 const scene = new THREE.Scene(); //新建相机对象 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //新建渲染器对象 const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );// 通过调用 setSize() 方法设置渲染的长宽(设置渲染器为全屏) //dom操作添加渲染器 document.body.appendChild( renderer.domElement ); //添加立方体 const geometry = new THREE.BoxGeometry( 1, 1, 1 ); //添加纹理 const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); //把纹理塞到立方体上 const cube = new THREE.Mesh( geometry, material ); //将立方体添加到场景中 scene.add( cube ); //移动相机,避免相机与物体重合 camera.position.z = 5; function animate() {//动画请求框架 requestAnimationFrame( animate ); //改变正方体在场景中的位置,让正方体动起来 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); // 结合场景和相机进行渲染,即用摄像机拍下此刻的场景(最后一步) } animate(); </script>
来看看效果:
当然我们也可以让它加快一点转速
function animate() {//动画请求框架 requestAnimationFrame( animate ); //改变正方体在场景中的位置,让正方体动起来 cube.rotation.x += 0.999; cube.rotation.y += 0.999; renderer.render( scene, camera ); // 结合场景和相机进行渲染,即用摄像机拍下此刻的场景(最后一步) }
来看看效果
gif效果显示不出来,想象一下有个绿色的正方体在中间鬼畜就对了
5.课后习题
function animate() { //请求-动画-框架 requestAnimationFrame( animate ); //改变正方体在场景中的位置,让正方体动起来 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); // 结合场景和相机进行渲染,即用摄像机拍下此刻的场景(最后一步) }
5.1.requestAnimationFrame()是什么?
动画渲染部分为什么不使用定时器setTimeout而使用requestAnimationFrame()?
下章回答
关键词:
-
世界速递!2023.4.7【模板】快速沃尔什变换FWT
2023 4 7【模板】快速沃尔什变换FWT题目概述给定长度为$2^n$两个序列$A,B$,设$C_i= sum_{j oplusk=i}A_j timesB_k$分别当$
来源: 世界速递!2023.4.7【模板】快速沃尔什变换FWT
今日报丨面试题百日百刷-HBase HRegionServer宕机如何处理
第135篇:Three.js基础入门
每日消息!交易商协会评估更新定向债务融资工具专项机构投资人名单
美国3月非农就业人口增幅降至23.6万 失业率为3.5%
热文:构造柱的作用是什么_构造柱的作用
焦点热讯:网友称余额宝页面显示乱码 支付宝回应:正在修复 不影响资金安全
《龙马精神》电影中真打实摔 成龙:我69岁动作比你还快
热点!说十个需要送老婆礼物的节日
焦点观察:火热出炉 秘汁全鸡的数字新“味”
大阳睿能全新动力首款车型H12下线:电机1700W 续航150公里
249元 小米米家自动真空封口机发布:-70KPa大吸力
全球快资讯丨世界各地小孩的玩具对比:不止文化与财富的差距
当前动态:马斯克开源推特算法反被指责:隐藏重要细节、与承诺不符
【当前独家】《王者荣耀》S31赛季4月13日上线 新英雄姬小满来了
深圳开放大学优秀学生李德炎:保持学习状态,争做行业模范
天天快看点丨自动旋转ROS小车(rviz+urdf+xacro)(附加python操作键盘控制小车运动)
每日资讯:java -- Math、BigInteger、BigDecimal类和基本类型的包装类、正则表达式
【快播报】黑田东彦“卸任”言论释放宽松信号 日债收益率曲线平坦化下移
速递!定价全球最低!国产科幻FPS《边境》国区售价68元起
天天观热点:孟羽童已不是董明珠秘书引热议 本人回应:很享受格力市场营销工作
今日看点:米粉换上Redmi Note 12 Turbo:陪伴他5年的小米6正式退役
天天即时看!网友看电影觉得难看成功退一半费用 影城:散场20分钟内可办理
电动自行车调速器网上公开售卖!专家:私改限速或引发燃爆事故
环球资讯:ps 备忘清单_开发速查表分享
天天观天下!王者更新:祈愿夺宝重启,520传说天幕返场,5英雄喜提新衣
焦点速读:离谱!观致汽车要倒台 车主也被拉下水:被厂商告了
全球气象预报大模型风乌发布:有效预报时间首破10天
事关“刹车失灵”争议核心数据 本田中国召回超20万辆雅阁
长城财报漂亮 是因为新能源汽车卖得不漂亮
全球新资讯:仅1999元!铁威马F4-423(4G)四盘位NAS开启预售:双2.5G网口
全球速读:大美游轮2022年亏损2511.24万同比亏损增加 游轮运营业务毛利减少
Privilege Escalation 权限提升
即时焦点: 如何处理Xcode上传IPA文件后无法在后台架构版本中显示的问题?
当前要闻:易基因:群体分析揭示了DNA甲基化在番茄驯化和代谢多样性中的作用|组学研究
记录-VueJs中如何使用Teleport组件
Springfox与SpringDoc——swagger如何选择(SpringDoc入门)
澳大利亚一飞机掉入印度洋:全员坠海 未有伤亡
世界速递!比亚迪大疆达成合作!全新海狮将用上高级辅助驾驶技术:纯视觉走天下
每日消息!希捷推出星球大战版SSD:三款RGB光剑任选
资讯推荐:一图看懂!小米/红米多款热门机型官方降价:小米12S/13全系有活动
环球新动态:用两年就卡?3分钟学会选电视硬件
当前播报:申城交警多措并举加强高速公路和城市快速路事故预防工作
世界头条:用 Go 剑指 Offer 17. 打印从1到最大的n位数
【天天时快讯】获取Python函数信息的方法
世界信息:GPT对SaaS领域有什么影响?
全球新资讯:什么是 Java 字节码?采用字节码的好处是什么?
【天天聚看点】ubuntu离线安装tcpdump
因债券承销尽调不充分等问题 民生证券被上交所出具书面警示
每日视讯:最新确认:小米13 Ultra用上了USB 3.X接口
《流浪地球2》4月14日网络首播!导演郭帆:修改了一百多个视效镜头
差评高达86%!艺画开天官博恢复《三体》动画相关微博
【世界聚看点】等等党狂喜!比亚迪海豹有优惠了:本月订车至享高3.1万元减免
全球热门:荣耀Magic5 Pro“首碎”!SUV压过屏幕依旧完好
每日热闻!微信界面黑色怎么设置成白色_微信变成黑色怎么调过来
【独家】使用Drone+gitea配置自己的CICD流程
全球热消息:收评:两市震荡走强创指涨0.84% 医药、人工智能概念涨幅居前
最资讯丨马来西亚原装进口:猫山王榴莲雪糕4元/支狂促
索尼痛斥英国CMA:偏袒微软过于荒谬
当前头条:合资A级轿车更难了!2023款比亚迪秦PLUS EV冠军版上市:12.98万起
苹果中国杀疯!iPhone14售价跌破5000元 买它还是华为P60?
环球要闻:网红密子君带货无骨鸡爪!粉丝提醒她有蟑螂 本人道歉
保罗:比赛起起伏伏很奇怪 从未跟KD这种能吸引包夹的球员共事过
焦点热门:全文索引:Apache Lucene(一)
天天热讯:Java 自增自减运算符和移位运算符介绍
世界观速讯丨NTP时间同步服务器(频率同步)包含帧同步、载波同步、位同步
sms-activate短信验证码问题
世界新资讯:153. 寻找旋转排序数组中的最小值
【财经分析】新规创新保险服务模式 完善多层次长期护理保障制度
国风开放世界新作:网易新游《暂时叫它:天字七六》公布
世界今热点:全新MacBook要用OLED屏!如果不烧屏还是挺香的
或8万起售 比亚迪海鸥四颜色曝光:绿、黑、白、粉你选谁
这可能是最好看的RX 7900 XTX:华擎发布太极白色版
科大讯飞刘聪:5月6日将发布“1+N认知智能大模型”
泫雅和张贤胜的组合叫什么?泫雅和张贤胜在一起过吗?
蛇沼鬼城后面一部是什么?蛇沼鬼城录像带里的吴邪是谁?
张一山为什么剃光头?张一山出演的电视剧有哪些?
南派三叔为什么要封笔?南派三叔的全部作品顺序
被嫌弃的松子的一生讲了什么? 松子一生坎坷结局是怎么死的?
【新视野】山西省印发钢铁行业转型升级2023年行动计划
全球播报:[Web Server]Tomcat调优之监控连接池/线程池
焦点快播:(笔记)电源缓启动工作原理
世界速看:详解 Flink Catalog 在 ChunJun 中的实践之路
【环球速看料】Python selenium过图片滑块验证
拼多多百亿补贴“厂家直销”受阻:京东自营再现“排他性”竞争
细思极恐!韩国分析日本农产品超20%检出放射性物质铯
环球热讯:南财基金通·混合型基金收益排行榜(4月6日)
【天天热闻】Java中子类重写父类方法的思想本质!
头条焦点:CRLF和LF区别
焦点日报:买车更方便!新车上牌免查验试点新增21个城市:看看有你家吗
天天资讯:工资6000面试6轮当事人发声:没被录用 可能介意我年龄大
当前观察:出游正值好春光!“五一”旅游需求爆发
为何全球这么多人首选iPhone:苹果保值率第一 安卓机惨
环球资讯:气象台:未来十天冷空气影响频繁 9日起沙尘天气将卷土重来
天天动态:分库分表之ShardingSphere
要闻:新农保和社保可以同时交不_新农保和社保可以同时交
真不是人扮的?黑猩猩吃完饭主动到水池里洗盘子游客看呆
每日速看!离地球最近的黑洞被发现!科学家:还有许多黑洞待发现
焦点日报:比亚迪百万级纯电超跑!仰望U9确定参加上海车展:加速2秒级
中规中矩!杜兰特半场10中4得11分5板2助 共出现3次失误