Three.js学习5：场景

 -----------------------------华丽的分割线---------------------

相关代码均已上传到 gitee 中：myThree: 学习 Three.js ，努力加油~！

Gitee 静态演示地址：Three JS 演示页面

 -----------------------------华丽的分割线---------------------

一、场景

场景：可以理解为 3D 空间，3D 世界。能够控制在什么地方、摆放什么东西来交给three.js来渲染。能够放置物体、灯光和摄像机的地方。

Three.js 场景主要分为两类：

1. Scene：普通场景。

2. Frog：雾。

二、场景创建

const scene = new THREE.Scene();

创建的场景和相机一起，在渲染器里被渲染后，用户才能看到渲染出来的 3D 内容。

renderer.render( scene, camera );

场景的初步应用在前面的文章已经有所涉及，大家可以把之前的代码再敲下，以加强印象。

三、常用属性

1. background

给场景添加一个背景。

官方文档说明：

其值为一个对象 Object。若不为空，在渲染场景的时候将设置背景，且背景总是首先被渲染的。 可以设置一个用于的“clear”的Color（颜色）、一个覆盖canvas的Texture（纹理）， 或是 a cubemap as a CubeTexture or an equirectangular as a Texture。默认值为null

（1）背景颜色

直接给场景设置背景色，常用的颜色设置方式如下：

scene.background =new THREE.Color("#cccccc");
scene.background =new THREE.Color( 0xCCCCCC);
scene.background =new THREE.Color( rgb(255, 0, 0) );
scene.background =new THREE.Color( 'skyblue' );

 注：这里的颜色必须是 Three.js 的颜色对象。

（2）图片纹理

图片纹理（texture），其实就是一张图片，也就是说，给场景的背景添加一张图片。

1. 使用 THREE.TextureLoader().load() 纹理加载器对象，加载纹理图片。

2. 纹理图可以设置水平（texture.wrapS）和垂直方向（texture.wrapT）的重复方式。它们有三个值：

• 默认值是：THREE.ClampToEdgeWrapping纹理的最后一个像素延伸到网格的边缘，既不重复。

• THREE.RepeatWrapping：纹理将重复无穷大

• THREE.MirroredRepeatWrapping镜像重复，可以理解为重复时，反着绘制一个然后正着绘制一个。

   3. 给伦理设置重复次数。

texture.repeat.set(4,4);   // 水平重复 和  垂直重复

const texture = new THREE.TextureLoader().load( "images/meinv.jpg" );  // 加载纹理图
texture.wrapS = THREE.MirroredRepeatWrapping;  // 水平重复
texture.wrapT = THREE.MirroredRepeatWrapping;  // 垂直重复
texture.repeat.set(4,4);   // 设置水平、垂直纹理的重复次数。
scene.background =texture;  // 添加纹理背景到场景

3种重复方式对比：  

（3）立方纹理

立方纹理（CubeTexture），是一个由 6 张图片所组成的纹理对象。把对象看成是一个立方体，按照“左右，上下，后前”的顺序进行设置。

1. 使用立方纹理加载器加载图片。因为图片较多，为了方式图片路径过长，一般要设置图片所处的路径。

2. 加载的图片按照“左右，上下，后前”的顺序排列。（相对用户而言）

立方纹理里所有的图片都必须是正方形，且一样宽高。经过测试，图片不宜过大，否则加载非常慢。

const cubeTexture = new THREE.CubeTextureLoader().setPath("../texture/").load([
    "1.jpg","2.jpg",
    "3.jpg","4.jpg",
    "5.jpg","6.jpg"
]);
scene.background =cubeTexture;

假如6张图片都是美女图片？？？ 

 

如果把所有的图片都换成一样的，比如星空图，可以感觉置身在浩瀚的宇宙中。

2. backgroundBlurriness

背景模糊度，有效值 0-1，默认值为 0。

立方纹理慎用，有可能会很卡。

scene.backgroundBlurriness  = 0.2;

3. fog

fog，雾，用来模拟一个雾天效果。雾，就是懵懵懂懂，半清半楚的感觉。

官方文档说明：

这个类中的参数定义了线性雾。也就是说，雾的密度是随着距离线性增大的。

scene.fog = new THREE.Fog( 0xcccccc, 1, 1000 );

 参数说明：

• color：雾的颜色。比如说，如果将其设置为黑色，远处的物体将被渲染成黑色。颜色可以是一个十六进制的整型数，或者是CSS风格的字符串。一般建议把 fog 的颜色设置跟场景背景色一致。

• near : 开始应用雾的最小距离。距离小于活动摄像机“near”个单位的物体将不会被雾所影响，物体会非常清晰。默认值 1。

• far：结束计算、应用雾的最大距离，距离大于活动摄像机“far”个单位的物体将不会被雾所影响。不会不清不楚，而是会直接消失不见。默认值 1000 。

也就是说 fog 雾计算的范围限制在距离相机 near~far 之间的距离，超过 far 单位的物体将不可见。

四、一个示例代码

import  * as THREE  from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let winW = window.innerWidth;
let winH = window.innerHeight;
// 场景
const scene = new THREE.Scene();
// 场景背景色
scene.background =new THREE.Color("#cccccc");
// 添加雾
scene.fog = new THREE.Fog("#cccccc", 5, 10);


// 网格
const gridHelper = new THREE.GridHelper();
scene.add( gridHelper );

// 物体
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
    color:"#ff0000"
});
const mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );

// 相机
const camera = new THREE.PerspectiveCamera(50, winW/winH,1, 50);
camera.position.set(0,0,5);
camera.lookAt( mesh );
scene.add( camera );

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( winW, winH );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement );
controls.enableDamping = true;  // 启用阻尼效果。必须应用动画。
controls.dampingFactor = 0.01;  // 设置阻尼值
controls.minDistance = 5;   // 最小，最大缩放比例。用于透视相机 PerspectiveCamera
controls.maxDistance = 30;  
controls.update();

function aniFun(){
    controls.update();
    renderer.render( scene, camera );
    requestAnimationFrame( aniFun );
}
aniFun();