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

相关推荐
Sylvia-girl1 小时前
Java——抽象类
java·开发语言
Yana.nice3 小时前
Bash函数详解
开发语言·chrome·bash
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
tomorrow.hello5 小时前
Java并发测试工具
java·开发语言·测试工具
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊6 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
她说人狗殊途7 小时前
java.net.InetAddress
java·开发语言