meshthreejs属性_Three.js-场景对象THREE.Scene使⽤详解
（属性。。。
⼀、基本介绍
1，THREE.Scene 的作⽤
(1)THREE.Scene对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。
(2)THREE.Scene 对象⼜是被称为场景图，它不仅仅是⼀个对象数组，还包含了整个场景图树形结构中的所有节点：
每个添加到 Three.js 场景的对象，甚⾄包括 THREE.Scene 本⾝都是继承⾃⼀个名为THREE.Object3D 的对象。
每个 THREE.Object3D 对象也可以有⾃⼰的⼦对象，我们可以使⽤它的⼦对象来创建⼀个 Three.js 能解释和渲染的对象树。
2，THREE.Scene 常⽤的⽅法和属性
⽅法(属性)
描述
add(object)
⽤于向场景中添加对象。使⽤该⽅法还可以创建对象组。
children
⽤于返回⼀个场景中所有对象的列表，包括摄像机和光源。
getObjectByName(name,recursive)
在创建对象时可以指定唯⼀的标识 name，使⽤该⽅法可以查特定名字的对象。
当参数 recursive设置为 false时，在调⽤者⼦元素上查
当参数 recursive设置为 true时，在调⽤者的所有后代对象上查
remove(object)
object为场景中对象的引⽤，使⽤该⽅法可以将对象从场景中移除。
traverse(function)
该⽅法也可以遍历调⽤者和调⽤者的所有后代，function参数是⼀个函数，被调⽤者和每⼀个后代对象调⽤ function⽅法。
fog
使⽤该属性可以为场景添加雾化效果，可以产⽣隐藏远处物体的浓雾效果。
overrideMaterial
使⽤该属性可以强制场景中的所有物体使⽤相同的材质。
⼆、使⽤样例
1，效果图
(1)页⾯打开后默认显⽰效果如下。右上⾓的控制⾯版中的第⼀项显⽰当前场景中对象的个数(初始时为 1 个平⾯，2 个光源)
(2)每点击⼀次“addCube”按钮，会往场景中添加⼀个⽴⽅体(⽴⽅体颜⾊、位置、⼤⼩随机，且不断旋转)
(3)点击“removeCube”按钮可移除最后⼀个添加的⽴⽅体，同时通过“rotationSpeed”控制项可以调整⽴⽅体旋转的速度。
(4)点击“使⽤相同材质”按钮可以将场景中所有的物体使⽤相同的材质和颜⾊进⾏渲染。
(5)点击“雾化”按钮可以给场景添加雾化效果。
(6)点击“输出所有对象”按钮会将场景中所有对象信息输出到控制台中。
2，样例代码
hangge
body {
margin: 0;
overflow: hidden;
}
//⽹页加载完毕后会被调⽤
function init() {
初始化统计对象
var stats = initStats();
//创建⼀个场景(场景是⼀个容器，⽤于保存、跟踪所要渲染的物体和使⽤的光源) var scene = new THREE.Scene();
//创建⼀个摄像机对象(摄像机决定了能够在场景⾥看到什么)
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
//设置摄像机的位置，并让其指向场景的中⼼(0,0,0)
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//创建⼀个WebGL渲染器并设置其⼤⼩
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
//创建⼀个平⾯
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial);
//设置平⾯的旋转⾓度和位置
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//将平⾯添加场景中
scene.add(plane);
//添加环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
/
/添加聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
//将渲染的结果输出到指定页⾯元素中
//dat.GUI对象使⽤的配置(存放有所有需要改变的属性的对象)
var controls = new function () {
//旋转速度
/
/场景对象个数
this.numberOfObjects = scene.children.length;
//增加⼀个⽴⽅体
this.addCube = function () {
var cubeSize = il((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
//设置⽴⽅体的名字
cube.name = "cube-" + scene.children.length;
//⽴⽅体位置随机
cube.position.x = -30 + und(
(Math.random() * planeGeometry.parameters.width));
cube.position.y = und((Math.random() * 5));
cube.position.z = -20 + und(
(Math.random() * planeGeometry.parameters.height));
//将⽴⽅体添加到场景中
scene.add(cube);
this.numberOfObjects = scene.children.length;
};
//移除最后⼀个⽴⽅体
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length - 1];
if (lastObject instanceof THREE.Mesh) {
this.numberOfObjects = scene.children.length;
}
};
//所有物体强制使⽤某个材质
this.overrideMaterial = function() {
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); }
//雾化
this.foggy = function() {
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
}
//输出所有对象
this.outputObjects = function () {
console.log(scene.children);
}margin属性怎么用
};
//创建dat.GUI，传递并设置属性
var gui = new dat.GUI();
gui.add(controls, 'numberOfObjects').name("当前对象个数").listen();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'overrideMaterial').name("使⽤相同材质");
gui.add(controls, 'foggy').name("雾化");
gui.add(controls, 'outputObjects').name("输出所有对象");
//渲染场景
render();
//渲染场景
function render() {
stats.update();
/
/旋转所有的⽴⽅体
if (e instanceof THREE.Mesh && e != plane) {
}
});
//通过requestAnimationFrame⽅法在特定时间间隔重新渲染场景requestAnimationFrame(render);
//渲染场景
}
//初始化统计对象
function initStats() {
var stats = new Stats();
//设置统计模式
stats.setMode(0); // 0: fps, 1: ms
//统计信息显⽰在左上⾓
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.p = '0px';
//将统计对象添加到对应的
元素中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。