62 Three.js 使用对象组合

最新推荐文章于 2023-04-05 10:14:57 发布
最新推荐文章于 2023-04-05 10:14:57 发布
阅读量2.5k 收藏 5
点赞数 3
分类专栏： Three.js笔记 文章标签： three.js webgl 对象组合 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/79547532
版权

简介

将多个模型放到一个组里面，就是一个对象组合。
创建组非常简单，每个你创建的网格都可以包含子元素，子元素可以使用add函数来添加。在组中添加子元素的效果是：你可以移动、缩放、旋转和变形父对象，而所有的子对象都将会受到影响。
我们可以查看一个例子，案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-13/120.html
点击勾选右上角的rotate会发现模型进行自转，球形效果看不出来。如果，再勾选grouping选项，会发现两个模型不再自转，而是围绕中间的辅助坐标进行旋转。

对象组合的实现

对象组合很好实现，首先创建一个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>
暮志未晚NAN
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Threejs-04、物体的缩放与旋转
ChenJin_2的博客
06-07 574
Threejs-04、物体的缩放与旋转
Three.js几何对象的组合
jarisMA的博客
08-29 461
Three.js几何对象的组合## 发布时间：2018-08-29 16:02:35 1.创建一个几何体 2.创建一个Object3D对象或者Group对象 3.将几何体添加进入Object3D对象或者Group对象中 4.将Object3D对象或者Group对象添加进入场景中 以下以十字为例： var cylinderGeometry = new THREE.CylinderGeometry(0...
Three.js案例从0到1（2）创建组合对象并让它们动起来
pocean2012的博客
02-22 910
1. 创建对象，创建材质，并建立几何形状 //首先定义一个大海对象 Sea = function() { // 创建一个圆柱几何体 // 参数为：顶面半径，底面半径，高度，半径分段，高度分段 var geom = new THREE.CylinderGeometry(600, 600, 800, 40, 10); // 在 x 轴旋转几何体 geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI /
Threejs入门之十四：Threejs中的组(Group)对象
九仞山的专栏
04-05 3726
详细介绍了Threejs中组Group的属性与方法，本地坐标系(局部坐标系)和世界坐标系
threejs学习笔记--场景的基本组件
Mr_Lan_斩风的专栏
01-04 500
//雾化效果 //0.015是近处属性的值,100是远处属性值,通过这两个属性来决定雾的开始地方,以及浓度加深的程度 scene.fog = new THREE.Fog(0xffffff,0.015,100); //另一个方法 只给出颜色和浓度 scene.fog = new THREE.FogExp2(0xffffff,0.015); //材质覆盖 场景中所有的物体都会使用同样的材质 sce
使用three.js 的 交互式 3D 心脏模型
07-14
在本项目中，我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库，它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL，three.js...
使用 Tensorflow.js和 SocketIO 通过 websocket 控制 Three.js 3D 模型.zip
07-14
Three.js简化了WebGL的复杂性，让开发者可以方便地创建复杂的3D场景、对象和动画。在这个项目中，Three.js用于构建和渲染3D模型。当接收到Socket.IO传递的动作数据时，Three.js会根据这些数据更新3D模型的状态，比如...
Vue3 + Three.js 商城可视化实战
04-06
Vue3提供了强大的组件化开发模式，而Three.js则是JavaScript中的一个流行库，用于创建和展示复杂的3D场景。下面将详细解析这两个技术的结合及其在实际应用中的关键知识点。 **Vue3** Vue3是Vue.js框架的最新版本，...
three.js的室内地图展示
05-21
three.js提供了各种类型的灯光，如DirectionalLight（平行光）、PointLight（点光源）和AmbientLight（环境光），可以根据需要组合使用，营造出真实的光照效果。 7. **交互性**：为了让用户能够与地图互动，如点击...
THREE.JS开发指南源码
07-20
这个压缩包包含了作者Branch为Packt出版社的书籍《学习Threejs》更新到three.js版本r63的所有示例代码。 在学习Three.js时，理解源码是提升技能的关键。这份源码包中，你将发现各种各样的3D场景、对象和交互的实现...
Three.js（七）—— 组对象Group、层级对象
summer_du的博客
01-27 5603
文章目录7.1 组对象Group、层级对象Group案例查看子对象.children场景对象结构.add() 方法.remove()方法7.2 对象节点命名、查找、遍历模型命名(.name属性)树结构层级模型递归遍历方法.traverse()查找某个具体的模型7.3 本地位置坐标、世界位置坐标.getWorldPosition()方法建立世界坐标系概念本地缩放系数.scale本地矩阵.materix和世界矩阵.matrixWorld 7.1 组对象Group、层级对象 Group案例 //创建两个网格模型m
Three.js层级模型Group
u014291990的博客
11-09 3170
Three.js层级模型Group 本文通过Three.js的一个类Group来介绍Threejs层级模型的概念，如果你对WebGL层级模型已经有一定的概念，直接把重点放在Group的了解上，如果没有层级模型的概念，就借着对Three.js APIGroup的介绍了解下该概念。 这里以一个机器人三维模型来说下层级模型的概念，比如一整个机器人通过一个组对象Group表示，然后一条腿用一个组对象Gro...
THREE.js 实现屏幕只能看到指定区域
unirrrrr的博客
06-20 3022
计图项目展示完了，虽然展示的时候模板测试这一块还是有bug（可见区域会受透视投影的影响导致形状发生变化或离开视野），但是避开了bug展示。 今天看了一些资料，有了一点灵感，终于大概修好了bug。 1、功能设想 实现像透过竹子口看世界一样的效果，就是像下图这样 2、挣扎与灵感来源 因为计图项目中的bonus有模板测试这一项，本着努力做完所有bonus的念头，开始着手研究。 看了一下o...
Three.js Example 注解 —— css3d_panorama_deviceorientation.html
司马懿的西山居
03-14 1288
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读 three.js 官网 Example 地址：https://threejs.org/examples/ <!DOCTYPE html> <html> &lt...
Three.js层级模型节点命名、查找、遍历
u014291990的博客
12-01 6850
层级模型节点命名、查找、遍历 本文是Three.js电子书的6.2节 上节课说过Threejs场景对象Scene和各种子对象构成的层级模型就是一个树结构。如果你有一定的算法基础对树结构肯定会非常了解，如果你了解前端的DOM树结构也非常有助于本节课的学习，如果这些都不了解也没有关系，直接体验本节课的案例源码。 本文通过Three.js的一个类Group来介绍Threejs层级模型的概念，如果你对We...
Threejs 三大组件 -- 场景、相机、渲染器
hb_zhouyj的博客
12-06 1万+
Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。 场景 scene 场景是所有物体的容器。在Threejs中，场景只有一种，用 THREE.Scene 表示，构建场景如下： var scene = new THREE.Scene(); 场景组件包括： 相机 — 决定哪些东西要渲染到屏幕上 光源 — 对材
基于WebGL/Threejs技术的BIM模型轻量化之图元合并
热门推荐
ALLENJIAO的专栏
06-27 2万+
伴随着互联网的发展，从桌面端走向Web端、移动端必然的趋势。互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化。随着WebGL标准被广泛接受，出现了许多基于HTML5的开源三维引擎，如threejs、scenejs等。尤其threejs使用非常广泛，一方面由于其使用门槛较低，另一方面是其支持若干种三维文件格式，如...
three.js将多个mesh(网格模型)合并（merge）为一个多材质网格（ BufferGeometryUtils.mergeBufferGeometries ）
weixin_52125363的博客
01-12 1万+
提示：本文写道three.js中合并几何体的方法 文章为原创文章，如在别的平台引用请注明出处。 文章目录前言一、group一、BufferGeometryUtils.mergeBufferGeometries引入使用方式：问题：总结 前言 Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求。 但是当我们渲染几何体比较多的场景时候，有很多细小、零散零件我们不需要对他进行任何操作。零件数目一多就会会造成整个场景加载很慢。这个时候我们就想把场景中的一些细
three.js使用
最新发布
07-13
Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建复杂的3D图形和交互式场景。它是构建跨平台3D应用程序的理想工具，无需底层编程知识。以下是Three.js的基本使用流程： 1. **环境准备**：首先在HTML中引入Three.js库，通常通过CDN获取。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> ``` 2. **创建场景**：在JavaScript中初始化一个`THREE.Scene`对象，这是所有3D元素的容器。 ```javascript const scene = new THREE.Scene(); ``` 3. **创建相机**：`THREE.PerspectiveCamera`用于设置视口的视角。 ```javascript const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 设置初始位置 ``` 4. **创建渲染器**：`THREE.WebGLRenderer`负责将3D内容渲染到DOM元素中。 ```javascript const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 5. **加载几何体和材质**：如球体、立方体、纹理等。 ```javascript const geometry = new THREE.BoxGeometry(); // 创建几何体 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质 const cube = new THREE.Mesh(geometry, material); // 组合成3D物体 scene.add(cube); ``` 6. **动画和渲染循环**：通常使用requestAnimationFrame方法来持续更新渲染。 ```javascript function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值