创建场景实例
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
