Three.js

2020-07-10

字数统计: 409字 | 阅读时长: 1分

Three.js

三大组建

在 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.serSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

在 Threejs 中场景只有一种,用 var scene = new THREE.Scene(); 构建

相机

相机决定了场景中那个角度的景色会显示出来,相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。

在 Threejs 中有多种相机，这里介绍两种，它们是：
透视相机（THREE.PerspectiveCamera）、这里我们使用一个透视相机，透视相机的参数很多，这里先不详细讲解。后面关于相机的那一章，我们会花大力气来讲。定义一个相机的代码如下所示：

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