Three.js - 使用 THREE.Group 对象组合

最新推荐文章于 2024-05-30 17:57:45 发布
最新推荐文章于 2024-05-30 17:57:45 发布
阅读量1.7w 收藏 18
点赞数 5
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ithanmang/article/details/81874133
版权

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>
「已注销」
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
threejs-modern-app:全屏Three.js应用程序的样板和工具
05-13
threejs-modern-app 全屏Three.js应用程序的样板和工具 资产归功于和 它的灵感来自于的 ，但是使用ES6语法而不是node进行了重写和简化，使其更易于阅读和注释，因此可以轻松地对其进行自定义以满足您的需求。 ...
three.js 入门案例详解
10-18
three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和展示3D图形。它简化了WebGL的复杂性，让开发者能够轻松地构建交互式的3D应用。本篇文章将通过一个简单的入门案例，帮助初学者理解three.js 的基本...
three.js基础笔记
new_rike的博客
08-18 265
渲染器对象、场景对象、摄像机、三维坐标轴、全局光源、几何体、材质对象、网格对象、组容器（Group对象）新建渲染器对象、场景对象、摄像机、全局光源、Group对象/网格对象。// 创建组容器 （group对象)（非必须）// 将网格对象或组容器添加到场景对象中。// 新建一个光源 该光源作用于全局对象。//几何体和材质组合 新的网格对象。//将网格对象添加到组容器。// 将全局光源添加到场景中。// 新建三维坐标轴。// 将坐标添加到场景中。// 新建渲染器对象。three.js基础对象。...
Threejs入门之十四：Threejs中的组(Group)对象
九仞山的专栏
04-05 3571
详细介绍了Threejs中组Group的属性与方法，本地坐标系(局部坐标系)和世界坐标系
Three.js 研究：4、创建设备底部旋转的科技感圆环
最新发布
Coeus的专栏
05-30 451
使用网站工具https://convertio.co/zh/png-svg/进行PNG转SVG。
Three.js组对象Group、层级模型
u014291990的博客
12-01 4315
组对象Group、层级模型 本文是Three.js电子书的6.1节 本节课的目的是为了大家建立层级模型的概念，所谓层级模型，比如一个机器人，人头、胳膊都是人的一部分，眼睛是头的一部分，手是个胳膊的一部分，手指是手的一部分…这样的话就构成一个一个层级结构或者说树结构。 Group案例 在详细讲解层级模型之前先通过Threejs的类Group实现一个网格模型简单的案例。 下面代码代码创建了两个网格模型...
Three.js——七、Group层级模型
NanChen的博客
05-30 1619
通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。
Three.js（七）—— 组对象Group、层级对象
summer_du的博客
01-27 5183
文章目录7.1 组对象Group、层级对象Group案例查看子对象.children场景对象结构.add() 方法.remove()方法7.2 对象节点命名、查找、遍历模型命名(.name属性)树结构层级模型递归遍历方法.traverse()查找某个具体的模型7.3 本地位置坐标、世界位置坐标.getWorldPosition()方法建立世界坐标系概念本地缩放系数.scale本地矩阵.materix和世界矩阵.matrixWorld 7.1 组对象Group、层级对象 Group案例 //创建两个网格模型m
three.js网格组合—使用threeBSP库
赵佳佳的博客
03-02 595
为了实现更多模型的样式，可以使用threeBSP库中的三种函数对现有网格模型进行组合。 1.相关函数 intersect（交集）：使用该函数可以基于两个现有几何体的重合的部分定义此几何体的形状。 union（并集）：使用该函数可以将两个几何体联合起来创建出一个新的几何体。 substract（差集）：使用该函数可以在第一个几何体中移除两个几何体重叠的部分来创建新的几何体。 2.具体用法 1、使用script标签引入threeBSP库 <script src="../js/ThreeBSP.js"&gt
three.js 如何制作魔方
10-15
three.js是一个流行的JavaScript库，用于在Web浏览器中实现3D图形。以下是制作three.js魔方的关键步骤和涉及的技术点： 1. **定义坐标和材质**：首先，我们需要确定魔方每个方块的坐标位置，这可以通过一个二维数组...
three.js手机壳展示
11-07
three.js是一个基于JavaScript的开源库，专门用于构建三维图形，它利用WebGL技术实现在网页上渲染3D对象。 描述中提到的“用three.js做的一款手机壳模型在web端的3D模型展示效果”，暗示了项目的核心内容是创建一个...
Learning Three.js The JavaScript 3D Library for WebGL(2nd)英文版
01-30
通过学习《Learning Three.js The JavaScript 3D Library for WebGL(2nd)》，开发者可以掌握Three.js的基本概念、使用方法以及高级技巧，从而在WebGL环境下构建出令人惊叹的3D应用程序。无论是游戏开发、数据可视化...
three.js 08-01 之 Group 组合对象
zhulx_sz 的博客
02-01 7507
在前面的一些分享中，你会发现有用到过对象组合。例如前面一些分享示例中提到的用THREE.SceneUtils.createMultiMaterialObject(geometry, materials) 函数创建的物体对象，其实就是创建了一个 THREE.Group 组。这个函数创建的组包含多个副本，即针对 materials 材质数组参数的每一个材质，都会创建一个对应的网格并添加到组中，这样的组
Three.js层级模型Group
u014291990的博客
11-09 3117
Three.js层级模型Group 本文通过Three.js的一个类Group来介绍Threejs层级模型的概念，如果你对WebGL层级模型已经有一定的概念，直接把重点放在Group的了解上，如果没有层级模型的概念，就借着对Three.js APIGroup的介绍了解下该概念。 这里以一个机器人三维模型来说下层级模型的概念，比如一整个机器人通过一个组对象Group表示，然后一条腿用一个组对象Gro...
Three.js入门学习笔记11：Three.js-Group组合对象
基本无害的博客
03-17 1948
参考学习 http://www.yanhuangxueyuan.com/doc/Three.js/Group.html https://blog.csdn.net/ithanmang/article/details/80965712 http://www.yanhuangxueyuan.com/Three.js/ https://www.cnblogs.com/guxingy/p/11956390...
three.js组对象Group、层级模型
yinge0508的博客
02-16 1037
创建两个模型对象添加到组对象中，效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&..
Three.js - Group 组合对象
ithanmang
07-09 6862
在解析外部模型例如 obj模型的时候我们经常会发现、匿名函数中的加载解析后的参数object是一个Group，或者当前我们加载外部模型obj为例，然后通过Raycaster射线拾取数组的时候对象，当传递进去是scene.children发现并不会选中模型，但我们自己创建一些简单的模型会被选中。 这是因为，加载的外部模型会是在一个Group组对象中，如果直接scene.children是无法获取的...
three.js使用Group对象进行对象组合(vue中使用three.js48)
点燃火柴的博客
01-06 940
对象组合1.demo效果2.实现要点2.1 创建立方体和球体2.2 创建组合对象2.3 创建旋转动画3.demo代码 1.demo效果 如上图，该demo支持以下功能： 可以通过cubePosX、cubePosY、cubePosZ属性单独控制立方体的位置，通过cubeScale属性单独控制立方体的缩放比例。 可以通过spherePosX、spherePosY、spherePosZ属性单独控制球体体的位置，通过sphereScale属性单独控制球体体的缩放比例 可以通过groupPosX、groupPos
three js合并模型group的两种方式以及模型three.module.js 11217 Uncaught TypeError Cannot read property isBufferGe
u012483043的博客
06-01 1667
BufferGeometryUtils.mergeBufferGeometries模型时有可能出现:three.module.js:11217 Uncaught TypeError: Cannot read property 'isBufferGeometry' of null 此时我们可以使用以下方式解决这个问题 function merge(object) { const geometries = []; const matArr = []; var meshs =.
three.js group
09-09
Three.js 中的 Group 是用于将多个对象组合在一起的容器。它类似于 HTML 中的 div 元素，可以将多个子对象放在同一个组中，并对组进行统一的变换、事件处理等操作。 要创建一个 Group 对象，你可以使用以下代码： ```javascript const group = new THREE.Group(); ``` 然后，你可以将其他对象添加到该组中，例如： ```javascript const mesh1 = new THREE.Mesh(geometry1, material1); group.add(mesh1); const mesh2 = new THREE.Mesh(geometry2, material2); group.add(mesh2); ``` 通过将对象添加到组中，你可以同时对这些对象进行变换、旋转、缩放等操作。例如，你可以对整个组进行平移： ```javascript group.position.set(10, 0, 0); ``` 或者对组内的所有对象进行统一的旋转： ```javascript group.rotation.y = Math.PI / 4; ``` 还可以通过遍历组的子对象来对每个对象进行单独的操作。例如，你可以改变组内所有对象的材质： ```javascript group.traverse((object) => { if (object instanceof THREE.Mesh) { object.material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); } }); ``` 总之，Group 提供了一个方便的方式来管理和操作多个对象，使得在 Three.js 中创建复杂场景变得更加灵活和简便。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值