WebGL入门篇（3）

本篇主要学习三个API😄，感觉就像学习单词一样：

1.OrbitControls （阻尼：类似惯性效果）

轨道控制器（OrbitControls）

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在HTML中包含这个文件。

OrbitControls 是一个附加组件，必须显式导入。 See Installation / Addons.

引入方式：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

代码示例

const axesHelper = new THREE.AxesHelper( 5 ); scene.add( axesHelper );

2.Fog（雾：类似景深效果）

 scene.fog = new THREE.Fog('grey', 10, 15)

3.CubeTextureLoader（背景图片） / TextureLoader（物体图片）

加载CubeTexture的一个类。 内部使用ImageLoader来加载文件。

The loaded CubeTexture is in sRGB color space. Meaning the colorSpace property is set to THREE.SRGBColorSpace by default.

代码示例：

const scene = new THREE.Scene(); 
scene.background = new THREE.CubeTextureLoader()
.setPath('textures/cubeMaps/' ) 
.load( [ 
'px.png', 
'nx.png', 
'py.png', 
'ny.png', 
'pz.png', 
'nz.png' ] );

// 需要注意的是图片的宽高必须一样不然 会渲染不出来（黑色） 🤔

最终效果图如下

OK，今天到这里下期继续～