three.js学习

三大组建:场景(scene),相机(camera),渲染器(renderer)

创建三要素代码:

复制代码
var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 透明相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
document.body.appendChild(renderer.domElement) // 将渲染器对应的canvas(画布)添加到body中

一. 场景

在three.js中场景就只有一种,就是用var scene = new THREE.Scene();来表示

总结:场景是所有物体的容器,如需使用就把物体放到场景中就可以。

二. 相机

相机有很多种,场景中的角度(参数)不同,显示出来的景色也不一样。

  1. 透明相机(THREE.Perspective)

    var camera = new THREE.PerspectiveCamera(75,window.innerWIdth/window.innerHeight,0.1,1000)

三. 渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以什么样的方式来绘制。

复制代码
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.docuElement);

四. 添加物体到场景中

复制代码
var geometry = new THREE.CubeGeometry(1,1,1); // geometry - 几何
var meterial = new THREE.MeshBasicMaterial({color:0x00ff00}); // meterial - 材料,素材; color:0x00ff00 深蓝色
var cube = new THREE.Mesh(geometry, material); // cube - 立方体; Mesh - 网格
scene.add(cube);

CubeGeometry语法:

复制代码
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides);
width: 立方体X轴的长度
height: 立方体Y轴的长度
depth: 立方体Z轴的深度(长度)

以上3个参数就能够确定一个立方体

segmentsWidth: 分段宽度
segmentsHeight: 分段高度
materials: 材料

五. 渲染

渲染使用渲染器,结合相机和场景来得到结果画面。实现这个功能的函数是

renderer.render(scene, camera);

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

各个参数的意义是:

scene:前面定义的场景

camera:前面定义的相机

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

六. 渲染循环

渲染有两种方式:实时渲染和离线渲染 。

  1. 事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。

  2. 不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染,这就是实时渲染。

相关推荐
大飞pkz4 分钟前
【算法】排序算法汇总1
开发语言·数据结构·算法·c#·排序算法
Swift社区29 分钟前
Foundation Model 在 Swift 中的类型安全生成实践
开发语言·安全·swift
申阳37 分钟前
2小时个人公司:一个全栈开发的精益创业之路
前端·后端·程序员
草明38 分钟前
当 Go 的 channel 被 close 后读写操作会怎么样?
开发语言·后端·golang
AI_56781 小时前
脑科学支持的Python学习法:每天2小时碎片化训练,用‘神经可塑性’打败拖延症“
开发语言·python·学习
用户9873824581011 小时前
5. view component
前端
技术小丁1 小时前
零依赖!教你用原生 JS 把 JSON 数组秒变 CSV 文件
前端·javascript
古一|1 小时前
Vue路由两种模式深度解析+Vue+SpringBoot生产部署全流程(附Nginx配置)
javascript·vue.js·nginx
Crystal3281 小时前
原生 Vue + UniApp 的小程序或 App 项目里如何判断用户是否为首次下载应用
前端·vue.js
前端世界1 小时前
当网络里混入“假网关”:用 Scapy 写一个 DHCP 欺骗检测器(附完整代码与讲解)
开发语言·网络·php