ThreeJS之Scene(场景)
Posted 钱塘风华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ThreeJS之Scene(场景)相关的知识，希望对你有一定的参考价值。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
总体代码如下
<html><head> <title>basic_demo</title> <script src="../libs/three.js"></script></head><body><div id="WebGL-output"></div><script> function init() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); scene.add(camera); var renderer = new THREE.WebGLRenderer(); document.getElementById("WebGL-output").appendChild(renderer.domElement); renderer.render(scene, camera); } window.onload = init;</script></body></html>Scene相关方法
scene.add(camera);
// 这里是一个平面对象
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 对平面对象的位置及旋转进行了一些设置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// 向场景中添加了该平面对象
scene.add(plane);
// 点击按钮移除了该平面对象并重新渲染
document.getElementById('remove').addEventListener('click', function () {
scene.remove(plane);
renderer.render(scene, camera);
});
document.getElementById('log_all').addEventListener('click', function () {console.log(scene.children);})
// 设置plane的name属性用于之后的获取
plane.name = 'plane';
document.getElementById('get_plane').addEventListener('click', function () {console.log(scene.getObjectByName('plane'));})
// 首先在场景中再添加一个立方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 设置该立方体的位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// 为立方体增加一个name属性
cube.name = 'cube';
// 向场景中添加立方体
scene.add(cube);
// 输出场景中的每个子对象的name属性
// 这里首先判断子对象是否为 THREE.Mesh 实例来避免获取摄像机
scene.traverse(function (obj) {
if (obj instanceof THREE.Mesh) {
console.log(obj.name);
}
})
Scene相关属性
// 方式一：雾化效果线性增加// color：雾的颜色，near雾开始的近点，far雾结束的远点// 从近点到远点雾化的效果为线性增加scene.fog = THREE.Fog(color, near, far);// 方式二：雾化效果指数增加// 参数一为颜色，参数二为浓度scene.fog = THREE.FogExp2(color, 浓度)
以下代码使用到了相关方法及雾化属性
<html>
<head>
<title>basic_demo</title>
<script src="../libs/three.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="remove">移除平面</div>
<div id="add">添加平面</div>
<div id="get_plane">获取平面</div>
<div id="log_all">输出场景中的所有子对象</div>
<div id="log_all_name">输出场景中的所有子对象的名字</div>
<div id="change_fog">切换雾化</div>
<script>
var doc = document;
// 定义场景、平面、方块、摄像机、渲染器、雾化指标为全局变量
// 以便init函数外能够获取，同时在场景内对象增加和移除时可以重新进行渲染
var scene, plane, cube, camera, renderer, fogFlag = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置摄像机位置便于观察
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
// 设置渲染器背景颜色及尺寸，否则看不到场景中的对象
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight / 2);
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
plane.name = 'plane';
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
cube.name = 'cube';
scene.add(cube);
if (fogFlag) {
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
} else {
scene.fog = new THREE.FogExp2(0x0000ff, 0.01);
}
doc.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
window.onload = init;
function idClick(id, cb) {
doc.getElementById(id).addEventListener('click', cb);
}
var fnArr = [
{
id: 'remove',
cb: function () {
scene.remove(plane);
renderer.render(scene, camera);
}
},
{
id: 'add',
cb: function () {
scene.add(plane);
renderer.render(scene, camera);
}
},
{
id: 'get_plane',
cb: function () {
console.log(scene.getObjectByName('plane'));
}
},
{
id: 'log_all',
cb: function () {
console.log(scene.children);
}
},
{
id: 'log_all_name',
cb: function () {
scene.traverse(function (obj) {
if (obj instanceof THREE.Mesh) {
console.log(obj.name);
}
});
}
},
{
id: 'change_fog',
cb: function () {
fogFlag = !fogFlag;
if (fogFlag) {
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
} else {
scene.fog = new THREE.FogExp2(0x0000ff, 0.01);
}
renderer.render(scene, camera);
}
},
];
fnArr.map(item => {
var {id, cb} = item;
idClick(id, cb);
});
</script>
</body>
</html>
以上是关于ThreeJS之Scene(场景)的主要内容，如果未能解决你的问题，请参考以下文章