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. 不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染,这就是实时渲染。

相关推荐
用户63310776123661 分钟前
Who is a Promise?
前端
一人の梅雨6 分钟前
1688 店铺商品全量采集与智能分析:从接口调用到供应链数据挖掘
开发语言·python·php
小何好运暴富开心幸福18 分钟前
C++之日期类的实现
开发语言·c++·git·bash
威风的虫33 分钟前
JavaScript中的axios
开发语言·javascript·ecmascript
比老马还六37 分钟前
Blockly元组积木开发
前端
老赵的博客37 分钟前
c++ 是静态编译语言
开发语言·c++
Terio_my37 分钟前
Python制作12306查票工具:从零构建铁路购票信息查询系统
开发语言·python·microsoft
笨笨狗吞噬者40 分钟前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556661 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3