|
阅读：970回复：0
Three.js - 使用 THREE.Group 对象组合
THREE.Group前面已经介绍过，加载外部模型的时候，基本上都是一个组合对象，因为外部模型都是比较大的，把零散的模型组合到一块便于操作，可以使用THREE.Group来操作一组对象，包括旋转，缩放，移动等，里面的子对象都会受到影响。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180820/01-group.html THREE.Group继承自THREE.Object3D对象，并且和THREE.Object3D对象没有任何区别，仅仅是名字上的差异。 使用方法: ———————————————— var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); var cubeA = new THREE.Mesh( geometry, material ); cubeA.position.set( 100, 100, 0 ); var cubeB = new THREE.Mesh( geometry, material ); cubeB.position.set( -100, -100, 0 ); var group = new THREE.Group(); group.add( cubeA ); group.add( cubeB ); scene.add( group ); 因为和THREE.Object3D并无差异，所以var group = new THREE.Group();可以使用 var group = new THREE.Object3D(); 来代替 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>THREE.Group 对象组合</title> <style> body { margin: 0; overflow: hidden; /* 溢出隐藏 */ } </style> <script src="../../libs/build/three-r93.js"></script> <script src="../../libs/examples/js/Detector.js"></script> <script src="../../libs/examples/js/libs/dat.gui.min.js"></script> <script src="../../libs/examples/js/libs/stats.min.js"></script> <script src="../../libs/examples/js/controls/OrbitControls.js"></script> </head> <body> <script> var scene, camera, renderer, controls, guiControls; var stats = initStats(); /* 场景 */ function initScene() { scene = new THREE.Scene(); } /* 相机 */ function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(30, 20, 50); camera.lookAt(new THREE.Vector3(0, 0, 0)); } /* 渲染器 */ function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } /* 灯光 */ function initLight() { } /* 控制器 */ function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); /* 属性参数默认 */ } /* 调试插件 */ function initGui() { guiControls = new function () { this.group = true; this.rotation = false; this.scale = 1; }; var controls = new dat.GUI(); controls.add(guiControls, 'scale', 0.1, 2).onChange(function (e) { group.scale.set(e, e, e); }); controls.add(guiControls, 'group'); controls.add(guiControls, 'rotation'); } /* 场景中的内容 */ var group = new THREE.Object3D(); // let group = new THREE.Group(); function initContent() { var dir = new THREE.Vector3( 0, 2, 0 ); dir.normalize(); var origin = new THREE.Vector3( 0, 0, 0 ); var length = 5; var hex = 0xff0000; var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex ); scene.add( arrowHelper ); var normalMatrial = new THREE.MeshNormalMaterial(); var boxGeometry = new THREE.BoxGeometry(10, 10, 10); var cylinderGeometry = new THREE.CylinderGeometry(5, 5, 10); var box = new THREE.Mesh(boxGeometry, normalMatrial); box.name = 'box'; var cylinder = new THREE.Mesh(cylinderGeometry, normalMatrial); cylinder.name = 'cylinder'; box.position.x = -10; cylinder.position.x = 10; group.add(box); group.add(cylinder); scene.add(group); } /* 性能插件 */ function initStats() { var stats = new Stats(); document.body.appendChild(stats.domElement); return stats; } /* 窗口变动触发 */ function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } /* 数据更新 */ var step = 0.01; function update() { stats.update(); if (guiControls.group) { group.rotateY(-step); } if (guiControls.rotation) { scene.getObjectByName('box').rotateY(step+0.05); scene.getObjectByName('cylinder').rotateY(step+0.05); } } /* 初始化 */ function init() { initScene(); initCamera(); initRender(); initLight(); initControls(); initContent(); initGui(); /* 监听事件 */ window.addEventListener('resize', onWindowResize, false); } /* 循环渲染 */ function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); update(); } /* 初始加载 */ (function () { console.log("three init start..."); init(); animate(); console.log("three init send..."); })(); </script> </body> </html> https://blog.csdn.net/ithanmang/article/details/81874133 |
|
