three.js 第一节 - 场景、相机、渲染器

基本概念

js 复制代码
三维的物体要渲染在二维的屏幕上,首先要创建一个场景来放置物体,那么怎么显示三维的内容呢?

首先,应该找一个相机,将相机放在场景的某个位置,
然后,想要显示三维的内容,就要把相机拍的内容渲染出来,

所以,就引出三个基本概念:'场景'、'相机'、'渲染器'

1、创建场景

js 复制代码
const scence = new THREE.Scene()

2、创建相机

three.js里有几种不同的相机,在这里,我们使用PerspectiveCamera(透视摄像机)

js 复制代码
const camera = new THREE.PerspectiveCamera(
	45, // 视野角度:无论在什么时候,你在显示器上,能看到的场景的范围,单位:角度

	window.innerWidth / window.innerHeight, // 长宽比
	
	当物体的某些部分,'比相机的远截面远、比相机的近截面近',则,这部分是不会被渲染到场景中的
	0.1, // 近截面
	1000 // 远截面
)

// 设置相机位置
camera.position.set(0, 0, 10);

3、渲染器

js 复制代码
// 初始化渲染器
const renderer = new THREE.WebGLRenderer()

// 设置渲染器的尺寸
// renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)

// 将 webgl 渲染的canvas内容添加到body
document.appendChild(renderer, domElement)

// 使用渲染器,通过相机,将场景渲染出来
renderer.render(scence, camera)

此时,效果:

4、加入立方体

要创建立方体,需要一个BoxGeometry 对象(立方体),

这个对象包含了一个立方体中所有的顶点(vertices)和面(faces)

js 复制代码
// 创建几何体
/*
	参数一:1 是 width(宽度),表示立方体在 x 轴上的尺寸
	参数二:1 是 height(高度),表示立方体在 y 轴上的尺寸
	参数三:1 是 depth(深度),表示立方体在 z 轴上的尺寸
*/
const geometry = new THREE.BoxGeometry(1, 1, 1)

// 创建材质
使用'MeshBasicMaterial'对象,简单起见,这里只设置一个'color'属性
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

/* 
	然后,我们需要一个 Mesh(网格)
	网格包含一个几何体,以及作用在此几何体上的材质,
	我们可以直接将网格对象放入到我们的场景中,并让它在场景中自由移动。
*/
// 创建网格
const cube = new THREE.Mesh(geometry, material)

// 将网格添加到场景中
scence.add(cube)

此时,效果如下:

相关推荐
Mintopia4 小时前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
三维搬砖者20 小时前
基于 Three.js 开发三维引擎-02动态圆柱墙体实现
three.js
小桥风满袖20 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
用户3802258598241 天前
使用three.js实现3D地球
前端·three.js
三维搬砖者1 天前
基于 Three.js 开发三维引擎-01点类:从原理到实践
webgl·three.js
魂断蓝桥6662 天前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
Mintopia2 天前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Mintopia3 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
良辰未晚4 天前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
Mintopia4 天前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js