前端three.js 基本入门教程

一、TS基本要素

主要有 场景、相机、渲染器。

1、场景

【场景】是指是一个三维空间，所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。

// 创建场景

const scene = new THREE.Scene();

2、相机

【相机】用来确定位置、方向、角度，相机看到的内容就是我们最总在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向和角度。

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

3、渲染器

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

const renderer = new THREE.WebGLRenderer(); // 渲染器