我们熟悉的scene.add方法，其实就是往一个容器里面添加元素.
既然是容器，那也肯定可以做遍历、查找和删除等操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
//场景
var scene = new THREE.Scene();
//相机设置为世界坐标原点
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 300);
scene.add(camera);//添加相机
//添加坐标轴
var axes = new THREE.AxesHelper(500);//500表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
for(let i=0;i<6;i++) {
const cube = createMesh();
cube.position.set(0, 0, 30*i);//设置物体的位置,正前方10米
cube.name = `box-${i}`;
scene.add(cube);//添加物体
}
function createMesh() {
var geometry = new THREE.BoxGeometry(10, 10, 10);//几何体
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//材质
var cube = new THREE.Mesh(geometry, material);//渲染管线
return cube;
}
var renderer = new THREE.WebGLRenderer({
antialias:true,
alpha:true
});//画布
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//将渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
animate();
function animate() {
renderer.render(scene, camera);//开始渲染
requestAnimationFrame(animate);
}
console.log(scene.children);//场景中的所有对象，包括相机、坐标轴等
//遍历场景
for(let i=0;i<scene.children.length;i++) {
const obj = scene.children[i];
if(obj.type === 'Mesh') {
obj.material.color.set('#0000ff');
}
}
//寻找物体
const box = scene.getObjectByName('box-1');
box.material.color.set('#ff0000');
//删除物体
const lastbox = scene.children[scene.children.length -1];
scene.remove(lastbox);
</script>
网友评论