Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)

最新推荐文章于 2024-08-19 09:53:40 发布

acqui~Zhang

最新推荐文章于 2024-08-19 09:53:40 发布

阅读量2.9k

点赞数 4

分类专栏： Three.js 文章标签： three.js three Helper three.js 辅助对象 three.js基础

本文链接：https://blog.csdn.net/z1783883121/article/details/120411431

版权

Three.js 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发。本篇例举几个常见的，方便理解。以及一些效果

前言

Helper对象比较简单，Helper链接
在这里插入图片描述如图：官方的文档也是十分的齐全，左侧是不同类型的Helper右侧有关于该Helper的说明、代码示例以及其属性及其方法

一、AxesHelper

说明：该Helper是用于创建一个物体的3维坐标(即：物体的x，y，z)，该类接受一个size参数用于设置轴的线段长度

在这里插入图片描述相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码

created() {
    const threeObj = new threeUtil({
      modelUrl: "/static/3d/koala_con_flor/scene.gltf",
    });
    this.Three = threeObj;
    threeObj.init();
    // 创建辅助线
    (() => {
      const axesHelper = new threeObj.THREE2.AxesHelper(1);
      threeObj.scene.add(axesHelper);
    })();
    // threeObj.autoRotation();
  },

二、BoxHelper

说明：该Helper是用于创建物体的一个包装盒（可以这样理解）轴的线段长度

在这里插入图片描述

相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码

created() {
    const threeObj = new threeUtil({
      modelUrl: "/static/3d/koala_con_flor/scene.gltf",
    });
    this.Three = threeObj;
    threeObj.init();
    // 创建辅助线
    (() => {
      const sphere = new threeObj.THREE2.SphereGeometry();
      const object = new threeObj.THREE2.Mesh( sphere, new threeObj.THREE2.MeshBasicMaterial( 0xff0000 ) );
      const box = new threeObj.THREE2.BoxHelper( object, 0xffff00 );
      threeObj.scene.add( box );
    })(); 
    // threeObj.autoRotation();
  },