創(chuàng)建場(chǎng)景實(shí)例

var scene = new THREE.Scene();

常用的scene屬性和方法

屬性

• scene.background 背景顏色
  設(shè)置背景顏色為天藍(lán)色(00ffff)

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

• scene.fog 霧化
  THREE.Fog()：color顏色值，near開(kāi)始用霧的最小距離，far霧擴(kuò)散的最遠(yuǎn)距離
  THREE.FogExp2()：color顏色值，density密度(定義霧增長(zhǎng)多塊)

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

scene霧化.png

方法

• sence.add(object) 添加對(duì)象
  用于向場(chǎng)景中添加?xùn)|西

//添加立方體對(duì)象
sence.add(cube);

源碼

• main.js

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

//**場(chǎng)景：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);

//將立方體對(duì)象添加到場(chǎng)景中
scene.add(cube);

//渲染場(chǎng)景和相機(jī)
renderer.render(scene, camera);

其他

THREE.Scene()實(shí)例所含屬性和方法，官方文檔：
https://threejs.org/docs/index.html#api/en/scenes/Scene