Threejs_cascad层_树结构
根节点
scene=(Group类：Mesh/Line/Points）+（Group：Mesh/Line/Points）+（Group：Light）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第⼀个three.js⽂件_WebGL三维场景</title>
<style>
body {
margin:0;
overflow: hidden;
/* 隐藏body窗⼝区域滚动条 */
}
</style>
<!--引⼊three.js三维引擎-->
<script src="www.yanhuangxueyuan/threejs/build/three.js"></script>
<script src="www.yanhuangxueyuan/threejs/examples/js/controls/OrbitControls.js"></script>
<script src="www.yanhuangxueyuan/threejs/build/three.min.js"></script>
<!--<script src="www.yanhuangxueyuan/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="www.yanhuangxueyuan/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="www.yanhuangxueyuan/threejs/examples/js/loaders/STLLoader.js"></script>-->
<!--<script src="./three.js"></script>-->
<!--<script src="www.yanhuangxueyuan/threejs/build/three.js"></script>-->
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene =new THREE.Scene();
/**
* 创建⽹格模型
*/
//创建两个⽹格模型mesh1、mesh2
var geometry =new THREE.BoxGeometry(20,20,20);
var material =new THREE.MeshLambertMaterial({color:0x0000ff});
var group =new THREE.Group();
var mesh1 =new THREE.Mesh(geometry, material);
var mesh2 =new THREE.Mesh(geometry, material);
//把mesh1型插⼊到组group中，mesh1作为group的⼦对象
group.add(mesh1);
//把mesh2型插⼊到组group中，mesh2作为group的⼦对象
group.add(mesh2);
//把group插⼊到场景中作为场景⼦对象
scene.add(group);
/**
* 相机设置
*/
var width = window.innerWidth;//窗⼝宽度
var height = window.innerHeight;//窗⼝⾼度
var k = width / height;//窗⼝宽⾼⽐
var s =200;//三维场景显⽰范围控制系数，系数越⼤，显⽰的范围越⼤
//创建相机对象
var camera =new THREE.OrthographicCamera(-s * k, s * k, s,-s,1,1000);
camera.position.set(200,300,200);//设置相机位置
camera.lookAt(scene.position);//设置相机⽅向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer =new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺⼨
renderer.setClearColor(0xb9d3ff,1);//设置背景颜⾊
document.body.appendChild(renderer.domElement);//body元素中插⼊canvas对象//执⾏渲染操作指定场景、相机作为参数
</script>
</body>
</html>
<script>
/**
* 创建场景对象Scene
*/
var scene =new THREE.Scene();
/**
* 创建⽹格模型
*/
// 球体---⽹格模型创建函数
function sphereMesh(R, x, y, z){
var geometry =new THREE.SphereGeometry(R,25,25);//球体⼏何体
var material =new THREE.MeshPhongMaterial({//材质对象Material
color:0x0000ff
});
var mesh =new THREE.Mesh(geometry, material);// 创建⽹格模型对象=⼏何体+材质 mesh.position.set(x, y, z);//放置位置
return mesh;
}
// 圆柱体---⽹格模型创建函数
function cylinderMesh(R, h, x, y, z){
var geometry =new THREE.CylinderGeometry(R, R, h,25,25);//球体⼏何体
var material =new THREE.MeshPhongMaterial({
color:0xfff000
});//材质对象Material
var mesh =new THREE.Mesh(geometry, material);// 创建⽹格模型对象
mesh.position.set(x, y, z);
return mesh;
}
// 头部⽹格模型和组
var headMesh =sphereMesh(10,0,0,0);
headMesh.name ="脑壳"
var leftEyeMesh =sphereMesh(1,8,5,4);
leftEyeMesh.name ="左眼"
var rightEyeMesh =sphereMesh(1,8,5,-4);
var rightEyeMesh =sphereMesh(1,8,5,-4);
rightEyeMesh.name ="右眼"
var headGroup =new THREE.Group();
headGroup.name ="头部"
headGroup.add(headMesh, leftEyeMesh, rightEyeMesh);
// ⾝体⽹格模型和组
var neckMesh =cylinderMesh(3,10,0,-15,0);
neckMesh.name ="脖⼦"
var bodyMesh =cylinderMesh(14,30,0,-35,0);
bodyMesh.name ="腹部"
var leftLegMesh =cylinderMesh(4,60,0,-80,-7);
leftLegMesh.name ="左腿"
var rightLegMesh =cylinderMesh(4,60,0,-80,7);
rightLegMesh.name ="右腿"
var legGroup =new THREE.Group();
legGroup.name ="腿"
legGroup.add(leftLegMesh, rightLegMesh);
var bodyGroup =new THREE.Group();
bodyGroup.name ="⾝体"
bodyGroup.add(neckMesh, bodyMesh, legGroup);js控制滚动条
// ⼈Group
var personGroup =new THREE.Group();
personGroup.name ="⼈"
//⼈Group=头+⾝体
personGroup.add(headGroup, bodyGroup)
//场景加⼊
scene.add(personGroup);
<!--// 遍历查scene中复合条件的⼦对象，并返回id对应的对象 -->
<!--var idNode = ObjectById (4);-->
<!-- console.log(idNode);-->
<!--// 遍历查对象的⼦对象，返回name对应的对象（name是可以重名的，返回第⼀个） -->
<!--var nameNode = ObjectByName ("左腿");-->
<!-- lor.set(0xffff00);-->
<!--var mesh =new THREE.Mesh(geometry, material);-->
<!--// mesh的本地坐标设置为(50, 0, 0) -->
<!-- mesh.position.set(50,0,0);-->
<!--var group =new THREE.Group();-->
<!--// group本地坐标设置和mesh⼀样设置为(50, 0, 0) -->
<!--// mesh⽗对象设置position会影响得到mesh的世界坐标 -->
<!-- group.position.set(50,0,0);-->
<!-- group.add(mesh);-->
<!-- scene.add(group);-->
<!--// .position属性获得本地坐标 -->
<!-- console.log('本地坐标',mesh.position);-->
<!--// getWorldPosition()⽅法获得世界坐标 -->
<!--//该语句默认在threejs渲染的过程中执⾏，如果渲染之前想获得世界矩阵属性、世界位置属性等属性，需要通过代码更新 --> <!-- scene.updateMatrixWorld(true);-->
<!--var worldPosition =new THREE.Vector3();-->
<!-- WorldPosition(worldPosition);-->
<!-- console.log('世界坐标',worldPosition);-->
/**
* 相机设置
*/
var width = window.innerWidth;//窗⼝宽度
var height = window.innerHeight;//窗⼝⾼度
var k = width / height;//窗⼝宽⾼⽐
var s =200;//三维场景显⽰范围控制系数，系数越⼤，显⽰的范围越⼤
//创建相机对象
var camera =new THREE.OrthographicCamera(-s * k, s * k, s,-s,1,1000);
camera.position.set(200,300,200);//设置相机位置
camera.lookAt(scene.position);//设置相机⽅向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer =new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺⼨
renderer.setClearColor(0xb9d3ff,1);//设置背景颜⾊
document.body.appendChild(renderer.domElement);//body元素中插⼊canvas对象//执⾏渲染操作指定场景、相机作为参数
//递归遍历⽅法.traverse()
pe ==="Group"){
console.log(obj.name);
}
pe ==="Mesh"){
console.log(' '+ obj.name);
lor.set(0xffff00);
}
if(obj.name ==="左眼"| obj.name ==="右眼"){
lor.set(0x000000)
}
// 打印id属性
console.log(obj.id);
// 打印该对象的⽗对象
console.log(obj.parent);
// 打印该对象的⼦对象
console.log(obj.children);
})
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论