将多个模型放到一个组里面，就是一个对象组合。 创建组非常简单，每个你创建的网格都可以包含子元素，子元素可以使用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!
Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AMEnjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AMJavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AMPython lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.
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
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver Mac版
Alat pembangunan web visual
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
