Three.js使用对象组合实例方法
将多个模型放到一个组里面，就是一个对象组合。 创建组非常简单，每个你创建的网格都可以包含子元素，子元素可以使用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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Hubungan antara bilangan kejadian Oracle dan prestasi pangkalan data
Mar 08, 2024 am 09:27 AM
Hubungan antara bilangan contoh Oracle dan prestasi pangkalan data Pangkalan data Oracle ialah salah satu sistem pengurusan pangkalan data hubungan yang terkenal dalam industri dan digunakan secara meluas dalam penyimpanan dan pengurusan data peringkat perusahaan. Dalam pangkalan data Oracle, contoh adalah konsep yang sangat penting. Contoh merujuk kepada persekitaran berjalan pangkalan data Oracle dalam ingatan Setiap contoh mempunyai struktur memori dan proses latar belakang yang bebas, yang digunakan untuk memproses permintaan pengguna dan mengurus operasi pangkalan data. Bilangan kejadian mempunyai kesan penting terhadap prestasi dan kestabilan pangkalan data Oracle.
