【Three.js】01-1 场景scene

创建场景实例

var scene = new THREE.Scene();

常用的scene属性和方法

属性

• scene.background 背景颜色
  设置背景颜色为天蓝色(00ffff)

scene.background = new THREE.Color(0x00ffff);

• scene.fog 雾化
  THREE.Fog()：color颜色值，near开始用雾的最小距离，far雾扩散的最远距离
  THREE.FogExp2()：color颜色值，density密度(定义雾增长多块)

scene.fog = new THREE.Fog(0x000000, -10, 50);
scene.fog = new THREE.FogExp2(0x000000, 0.2)

scene雾化.png

方法

• sence.add(object) 添加对象
  用于向场景中添加东西

//添加立方体对象
sence.add(cube);

源码

• main.js

var oCanvas = document.getElementById('canvas-wrap');
var c_width = 500;
var c_height = 500;

//**场景：scene
var scene = new THREE.Scene();
//scene添加背景颜色
scene.background = new THREE.Color(0x00ffff);
//scene雾化
scene.fog = new THREE.FogExp2(0x000000, 0.2);
//scene雾化2
// scene.fog = new THREE.Fog(0x000000, -10, 50);

var camera = new THREE.PerspectiveCamera(75, c_width/c_height, 0.1, 1000);
camera.position.z = 4;
var renderer = new THREE.WebGLRenderer({canvas:  oCanvas});
renderer.setSize(c_width, c_height);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var cube = new THREE.Mesh(geometry, material);

//将立方体对象添加到场景中
scene.add(cube);

//渲染场景和相机
renderer.render(scene, camera);

其他

THREE.Scene()实例所含属性和方法，官方文档：
https://threejs.org/docs/index.html#api/en/scenes/Scene