我的世界:一个村落(其一)
本文github地址
本文是一篇three.js的入门文章,将介绍three.js的一些基本概念,并一步步搭建一个简单的场景模型:
在线预览:
一个村庄
场景元素
概念
用three.js构建场景,有三个不可或缺的场景元素:
scene:可以把它想象成一个容器,用来放置你场景中的所有元素(光源,物体)
camera:即相机被相机拍摄到的物体才能最终被呈现出来
renderer:三维的物体最终要呈现在二维的画布中,需要通过render来实现
其中透视相机由四个必要参数控制:
fov:决定了从相机位置可以看到的场景大小
aspect:呈现场景水平尺寸与垂直尺寸的比值,对于需要全屏显示场景该参数是window.innerWidth/window.innerHeight
near:物体呈现最小距离,小于该距离将不再呈现
far:物体呈现的最大距离,超过该距离物体将不再呈现
代码实现
// 配置参数
var HEIGHT = window.innerHeight
var WIDTH = window.innerWidth
var aspect = WIDTH / HEIGHT
var fov = 35
var near = .1
var far = 1500// 创建 scene
var scene = new THREE.Scene()// 创建 camera
var camera = new THREE.PerspectiveCamera(fov,aspect,near,far)// 设置相机位置
camera.position.set(0, 0, 20)// 创建 renderer
renderer = new THREE.WebGLRenderer({// 透明alpha: true, // 注意抗锯齿会影响性能,请酌情使用antialias: true })// 定义了最终呈现的尺寸
renderer.setSize(WIDTH, HEIGHT)
// 需要分清该尺寸与相机中的aspect的区别
// 前者就好比一部电影可以在电脑上看也可以在手机上看(这里的尺寸是最终呈现的尺寸)
// 后者好比一部电影我用绿幕拍和实景拍都可以(这里的尺寸指物理空间的大小)// 添加到DOM中
document.body.appendChild(renderer.domElement)
预览
这时候打开浏览器就是一片白什么也没有,
因为scene里面什么都没有
设置光源
光源是场景中重要的组成部分,同样的场景使用不同的光源可以达到迥然不同的效果
概念
AmbientLight:环境光可在场景中添加无差别的光,对整个场景与对象都有效
PointLight:点光源由一点散射出来的光
SpotLight:聚光灯由一点发出的光锥效果的光(自行脑补聚光灯吧)
DirectionalLight:一组平行光,通常被用来模拟太阳光
以上四种是比较常用的光
代码实现
// 环境光
var ambientLight = new THREE.AmbientLight(0xffe8d8, 0.6)
// 主光
var mainLight = new THREE.DirectionalLight(0xffe8d8, .8)
mainLight.position.set(-50, 40, -40)
更多种类光源及其参数
预览
这时候打开浏览器依旧是一片白什么也没有,
不要打我,因为场景里面还没有添加物体
添加物体
概念
不负责任地说,一个场景中的物体其实是由两部分组成的geometry和material
geometry:就是物体的骨架,决定了物体在三维空间中的形状
material:就是物体的皮肤,决定了物体在三维空间的呈现(自身颜色,是否反光,是否透明)
three.js中的geometry
three.js中的material
代码实现
var geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建一个边长为1的立方体var material = new THREE.MeshLambertMaterial({color:0x6699ff})
// 创建颜色为0x6699ff的Lambert材质var cube = new THREE.Mesh(geometry, material)
// 将骨架与材质合成物体scene.add(cube)
// 添加这个物体
预览
这样在浏览器中就可以看见一个物体了
运动
这样一个物体显得单调乏味,想个办法让他动起来
概念
帧:动画都是一帧一帧呈现的,就意味着我们需要一个循环,不断地在画布上绘制
requestAnimationFrame:它不是一个以时间为基准的API,所以你不必设定调用时间,它会在浏览器准备好绘制帧的时候调用
代码实现
改造一下render:
function loop() {renderer.render(scene, camera)// 每一帧都渲染一次cube.rotation.x += 0.01// 立方体繞x轴转动cube.rotation.z += 0.05// 立方体繞z终转动requestAnimationFrame(loop)// 循环}loop()
预览
在浏览器中可以看见立方体转动起来了
后续
下一节将介绍模型中各物体如山坡,房子的构建,以及如何创建阴影
我的世界:一个村落(其一)相关推荐
- 聚焦技术,锐意创新,GaussDB给世界一个更优选择
摘要:从整个行业应用层面来看,现在,数据库的国产化时代已经到来. 本文分享自华为云社区<聚焦技术,锐意创新,GaussDB给世界一个更优选择>,作者: GaussDB数据库. 今天,以&q ...
- 我的世界一个程序导致JAVA,Java地位无可动摇的12个原因
如今,面对曾经在程序员中被各种新技术掩盖直至堙灭的技术值得怀念.犹如COBOL这当年被老程序员们尊为神器的语言如今也基本没有价值.而Java作为现代程序员的中坚力量在这点上或许会成为下一个COBOL. ...
- 为智能世界“高”歌:HEIGHT,五种风景,一个答案
1764年,从英国到普鲁士,从法国到西班牙,欧洲处在各种各样的纷争与问题当中,没有人会想到,这一年工业革命正式开始,人类迎来了史无前例的飞速发展. 上世纪80年代末,冷战疑云漫天,全球处在深刻的猜疑与 ...
- 走进JavaWeb技术世界3:JDBC的进化与连接池技术
网络访问 随着 Oracle, Sybase, SQL Server ,DB2, Mysql 等人陆陆续续住进数据库村, 这里呈现出一片兴旺发达的景象, 无数的程序在村里忙忙碌碌, 读写数据库, ...
- 献结程序员的一个故事——管道的故事
管 道 的 故 事 在新经济里,如何让一个人都可以建立一个持续世袭收入的管道? 你可以成为邻家的百万富翁! 亲爱的读者: 一百年前,普通人几乎不可能成为百万富翁.来看看这份在20世纪所做的生活水平状况 ...
- 世界,就在窗外(序)
世界,就在窗外(序) 人类往往在给自己制造了一个精神空间后,便一头钻进去而忽视了空间之外的世界. 比如,在一个哲学价值观所构建的思维空间里,人们总是不知不觉地顺着这个空间里的路线去思考.去创造.久 ...
- 注入安卓进程,并hook java世界的方法
说明: 安卓系统的可执行对象有两个世界,一个是Linux Native世界,一个是Java世界.两个世界能够通过jvm产生交互,具体来说就是通过jni技术进行互相干涉.但是在正常情况下,只能在Java ...
- 往写好的html插入标签,写一个可插入自定义标签的 Textarea 组件
- "插入自定义标签是什么鬼?" - "比如你要插入一个的标签..." - "什么情况下会有这种需求?" - "得罪了产品的情况下 ...
- 成吉思汗:“世界之鞭”还是“人类之王”?
关于成吉思汗的书籍可谓汗牛充栋,而以今天的眼光考察这位伟人的却凤毛麟角.今年是蒙古统一800周年(1206-2006),世界范围内据说要展开一系列的纪念活动,所以有关成吉思汗的出版 ...
最新文章
- PHP面向对象(OOP)编程入门教程
- 如何创建生成非 MFC 项目的自定义 AppWizards
- 2017年网易校招题 数字翻转
- 认识死锁之死锁的基本概念
- Vue「一」—— webpack 的基本使用及常用配置
- 使用java理解程序逻辑(16)
- 相同数据源情况下,使用Kafka实时消费数据 vs 离线环境下全部落表后处理数据,结果存在差异...
- c语言学习资料 集锦
- 全球主要气象气候研究部门及其共享数据集介绍
- redis雪崩 击穿 穿透
- Perl中shift函数用法
- 网址短连接 short url
- 递归算法转化为非递归算法
- html计时器记 天数,手机如何记天数 记天数软件有哪些
- 知识图谱(二):图数据库neo4j的Linux安装与基本使用
- 【求职】程序员如何应对面试?保姆级步骤让你完美面试
- rosbag 详细使用
- SQL Server 中日期比较
- 手机、平板、电脑相互投屏解决方案
- 软件需求工程 R 综合论述题
热门文章
- Exchange OWA管理-----HTTPS实现OWA表单
- [转载] 杜拉拉升职记——33 360度评估
- 生命游戏 c语言,c++生命游戏源码
- oracle如何删除重复数据第一条,oracle删除重复数据保留第一条记录
- 内存管理-定时器循环、内存布局、tagged pointer、weak指针、copy、自动释放池
- JAVE SE 学习day_09:sleep线程阻塞方法、守护线程、join协调线程同步方法、synchronized关键字解决多线程并发安全问题
- iOS10 UI教程视图的中心位置
- 简述python程序结构_python架构的概念讲解
- gx works2 存储器空间或桌面堆栈不足_保证安全的移动空间,超高安全品质的私家车推荐...
- 用友 服务器位置,用友的云服务器在哪里