Rumah >hujung hadapan web >tutorial js >Three.js使用对象组合实例方法
Three.js使用对象组合实例方法
- 小云云asal
- 2018-03-14 17:32:222966semak imbas
将多个模型放到一个组里面，就是一个对象组合。 创建组非常简单，每个你创建的网格都可以包含子元素，子元素可以使用add函数来添加。在组中添加子元素的效果是：你可以移动、缩放、旋转和变形父对象，而所有的子对象都将会受到影响。
对象组合的实现
对象组合很好实现，首先创建一个THREE.Object3D的类的对象。这是THREE.Mesh和THREE.Scene的基类，但是它本身不包含任何东西，也不会渲染任何东西。请注意，在THREE.js的最新版本中引入了一个名为THREE.Group的新对象以支持分组。该对象与THREE.Object3D对象完全相同，它两个可以互换。
var group = new THREE.Object3D(); //实例化一个THREE.Object3D对象
group.add(sphere); //在对象里面添加第一个子元素
group.add(cube); //在对象里面添加第二个子元素
scene.add(group); //将对象组添加到场景当中代码如上，我们就实现了一个场景组。
注意：你旋转一个组时，并不是分别旋转组中的每一个对象，而是绕其中心旋转整个组（在我们的例子里，是绕着group对象的中心旋转整个组）。
使用组的时候，你依然可以引用、修改和定位每一个单独的几何体。唯一需要记住的是：所有的定位、旋转和变形都是相对父对象的。
案例代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body { margin: 0; height: 100%; }
canvas { display: block; }
</style></head><body onload="draw();"></body><script src="/lib/three.js"></script><script src="/lib/js/controls/OrbitControls.js"></script><script src="/lib/js/libs/stats.min.js"></script><script src="/lib/js/libs/dat.gui.min.js"></script><script>
var renderer; function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight); //告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
} var camera; function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 50);
camera.lookAt(new THREE.Vector3(0,0,0));
} var scene; function initScene() {
scene = new THREE.Scene();
} //初始化dat.GUI简化试验流程
var gui; function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
sphereX:-5, //球的x轴的位置
sphereY:5, //球的y轴的位置
sphereZ:0, //球的z轴的位置
sphereScale:1, //球的缩放
cubeX:15, //立方体的x轴位置
cubeY:5, //立方体的y轴位置
cubeZ:-5, //立方体的z轴的位置
cubeScale:1, //立方体的缩放
groupX:0, //模型组的x轴位置
groupY:0, //模型组的y轴位置
groupZ:0, //模型组的z轴的位置
groupScale:1, //模型组的缩放
grouping:false, //是否整个模型组旋转
rotate:false, //是否旋转
}; var datGui = new dat.GUI(); //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
//球型的操作
var sphereFolder = datGui.addFolder("sphere");
sphereFolder.add(gui,"sphereX",-30,30).onChange(function (e) {
sphere.position.x = e;
});
sphereFolder.add(gui,"sphereY",-30,30).onChange(function (e) {
sphere.position.y = e;
});
sphereFolder.add(gui,"sphereZ",-30,30).onChange(function (e) {
sphere.position.z = e;
});
sphereFolder.add(gui,"sphereScale",0,3).onChange(function (e) {
sphere.scale.set(e, e, e);
}); //立方体的操作
var cubeFolder = datGui.addFolder("cube");
cubeFolder.add(gui,"cubeX",-30,30).onChange(function (e) {
cube.position.x = e;
});
cubeFolder.add(gui,"cubeY",-30,30).onChange(function (e) {
cube.position.y = e;
});
cubeFolder.add(gui,"cubeZ",-30,30).onChange(function (e) {
cube.position.z = e;
});
cubeFolder.add(gui,"cubeScale",0,3).onChange(function (e) {
cube.scale.set(e, e, e);
}); //场景组的操作
var groupFolder = datGui.addFolder("group");
groupFolder.add(gui,"groupX",-30,30).onChange(function (e) {
group.position.x = e;
});
groupFolder.add(gui,"groupY",-30,30).onChange(function (e) {
group.position.y = e;
});
groupFolder.add(gui,"groupZ",-30,30).onChange(function (e) {
group.position.z = e;
});
groupFolder.add(gui,"groupScale",0,3).onChange(function (e) {
group.scale.set(e, e, e);
}); //添加旋转功能
datGui.add(gui, "grouping");
datGui.add(gui, "rotate");
} var light; function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.PointLight(0xffffff);
light.position.set(15,50,10); //告诉平行光需要开启阴影投射
light.castShadow = true;
scene.add(light);
} var sphere,cube,group; function initModel() {
//模型组
group = new THREE.Object3D();
scene.add(group); //球
var sphereGeometry = new THREE.SphereGeometry(5,200,200); var sphereMaterial = new THREE.MeshLambertMaterial({color:0xaaaaaa});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = -5;
sphere.position.y = 5; //告诉球需要投射阴影
sphere.castShadow = true;
group.add(sphere); //辅助工具
var helper = new THREE.AxisHelper(50);
scene.add(helper); //立方体
var cubeGeometry = new THREE.CubeGeometry(10,10,8); var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 15;
cube.position.y = 5;
cube.position.z = -5; //告诉立方体需要投射阴影
cube.castShadow = true;
group.add(cube); //底部平面
var planeGeometry = new THREE.PlaneGeometry(100,100); var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa}); var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = - 0.5 * Math.PI;
plane.position.y = -0; //告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
} //初始化性能插件
var stats; function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
} //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls; function initControls() {
controls = new THREE.OrbitControls( camera, renderer.domElement ); // 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true; //是否自动旋转
controls.autoRotate = false; //设置相机距离原点的最远距离
controls.minDistance = 100; //设置相机距离原点的最远距离
controls.maxDistance = 200; //是否开启右键拖拽
controls.enablePan = true;
} var step = 0.02; //模型旋转的速度
function render() {
//判断当前是否自动旋转
if(gui.rotate){ //判断是单个模型自转，还是模型组自转
if(gui.grouping){
group.rotation.y += step;
} else{
sphere.rotation.y += step;
cube.rotation.y += step;
}
}
renderer.render( scene, camera );
} //窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
} function animate() {
//更新控制器
render(); //更新性能插件
stats.update();
controls.update();
requestAnimationFrame(animate);
} function draw() {
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}</script></html>Atas ialah kandungan terperinci Three.js使用对象组合实例方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js滑动动画效果实例分享Artikel seterusnya：jquery+css3做出直播平台的导航
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional