1.デモ効果

ここに画像の説明を挿入
上に示したように、デモは次の機能をサポートしています。

作成する小さな立方体の数は、objNumプロパティを介して設定できます。
結合された属性をチェックすることにより、THREE.Geometry.merge（）関数がキューブをマージできるようにするかどうかを設定できます。

2.知識ポイントを含む

2.1グリッドをマージする理由

一般に、グループを使用して、多数のグリッドを操作および管理できます。ただし、オブジェクトの数が非常に多い場合、グループ内の各オブジェクトは独立しており、個別にレンダリングおよび処理する必要があるため、パフォーマンスがボトルネックになります。そのため、オブジェクトの数が増えると、パフォーマンスに大きな影響があります。現時点では、three.jsは、パフォーマンスを向上させる目的を達成するためにグリッドをマージする方法を提供します

2.2 THREE.Geometry.merge（）関数

これで、メッシュマージ関数mergeがTHREE.Geometryオブジェクト上で合成され、マージ関数を使用して、Geometryオブジェクトを介して直接呼び出すことができます。THREE.Geometry.merge()この関数は、1つ以上のジオメトリを1つのジオメトリにマージできます。
以下はその使用例です。


const cubeMaterial = new THREE.MeshNormalMaterial({
    
    
  transparent: true,
  opacity: 0.5
})
//创建方块1
const cubeGeometry1 = new THREE.BoxGeometry(10, 10, 10)
const cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial)
//创建方块2
const cubeGeometry2 = new THREE.BoxGeometry(20, 20, 20)
const cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial)

const geometry = new THREE.Geometry()

//将方块1合并到geometry 
cube1.updateMatrix()
geometry.merge(cube1.geometry, cube1.matrix)

//将方块2合并到geometry
cube2.updateMatrix()
geometry.merge(cube2.geometry, cube2.matrix)

//用合并后的几何对象创建网格
const mergeMesh = new THREE.Mesh(geometry, cubeMaterial)

//将使用合并方式创建的网格对象添加到场景
scene.add(mergeMesh )

2.3グリッドマージの影響

マージ後、複数のメッシュオブジェクトが1つにマージされ、パフォーマンスが大幅に向上します
グループの使用やマージされていない場合と比較して、マージ後にオブジェクトごとに個別の操作を実行することはできません。

3.実装ポイント

3.1ランダムな位置で小さな立方体を作成する

グリッドを組み合わせるには、小さな立方体の複数のグリッドオブジェクトが必要です。最初に、次のように、ランダムな位置を持つ立方体を作成する方法を実装する必要があります。

addCube () {
    
    
 const cubeSize = 1.0
 const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)
 const cubeMaterial = new THREE.MeshNormalMaterial({
    
    
   transparent: true,
   opacity: 0.5
 })
 const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
 cube.castShadow = true

 cube.position.x = -60 + Math.round(Math.random() * 100)
 cube.position.y = Math.round(Math.random() * 10)
 cube.position.z = -150 + Math.round(Math.random() * 175)

 return cube
}

3.2メッシュオブジェクトを組み合わせる

上記の手順では、ランダムな位置の正方形を作成するメソッドを実装しました。ここでは、forループを使用して、作成した小さな正方形をマージメソッドを介して新しいジオメトリオブジェクトにマージし、それを使用して新しいメッシュオブジェクトを作成します。、そして最後にそれをシーンに追加します

const geometry = new THREE.Geometry()
for (let i = 0; i < this.properties.objNum.value; i++) {
    
    
  const cubeMesh = this.addCube()
  cubeMesh.updateMatrix()
  geometry.merge(cubeMesh.geometry, cubeMesh.matrix)
}
this.scene.add(new THREE.Mesh(geometry, cubeMaterial))

3.3メッシュオブジェクトを再描画します

objNum属性を使用して生成される小さな正方形を調整するか、結合された属性をチェックしてオブジェクトをマージするかどうかを調整する場合、ページを再描画する必要があります。この場合、前回作成したすべてのメッシュオブジェクトを削除する必要があります。次に、それらを次のように再作成します。

redraw () {
    
    
  const toRemove = []
  this.scene.traverse(e => {
    
    
    if (e instanceof THREE.Mesh) toRemove.push(e)
  })
  toRemove.forEach(e => {
    
    
    this.scene.remove(e)
  })
  this.createCubes()
}

4.デモコード

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col :span="8">
                <span class="vertice-span">{
    
    {
    
    item.name}}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip" @change="redraw"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{
    
    {
    
    item.value}}</span>
              </el-col>
            </div>
          </div>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.combined" @change="redraw">combined</el-checkbox>
        </el-row>
      </section>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
    
    
  components: {
    
    },
  data () {
    
    
    return {
    
    
      properties: {
    
    
        objNum: {
    
    
          name: 'objNum',
          value: 300,
          min: 0,
          max: 10000,
          step: 1
        },
        combined: false
      },
      cube: null,
      rotation: 0,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    
    
    this.init()
  },
  methods: {
    
    
    formatTooltip (val) {
    
    
      return val
    },
    // 初始化
    init () {
    
    
      this.createScene() // 创建场景
      this.createCubes() // 创建方块
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
    
    
      this.scene = new THREE.Scene()
    },

    // 创建光源
    createLight () {
    
    
      // 添加聚光灯
      const spotLight = new THREE.SpotLight(0xffffff)
      spotLight.position.set(-40, 60, 20)
      spotLight.castShadow = true
      this.scene.add(spotLight) // 聚光灯添加到场景中
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x0c0c0c)
      this.scene.add(ambientLight)
    },
    // 创建相机
    createCamera () {
    
    
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)

      this.camera.position.set(-30, 40, 30) // 设置相机位置
      this.camera.lookAt(new THREE.Vector3(5, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender () {
    
    
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    addCube () {
    
    
      const cubeSize = 1.0
      const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)
      const cubeMaterial = new THREE.MeshNormalMaterial({
    
    
        transparent: true,
        opacity: 0.5
      })
      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
      cube.castShadow = true

      cube.position.x = -60 + Math.round(Math.random() * 100)
      cube.position.y = Math.round(Math.random() * 10)
      cube.position.z = -150 + Math.round(Math.random() * 175)

      return cube
    },
    // 创建多个方块
    createCubes () {
    
    
      const cubeMaterial = new THREE.MeshNormalMaterial({
    
    
        transparent: true,
        opacity: 0.5
      })
      if (this.properties.combined) {
    
    
        const geometry = new THREE.Geometry()
        for (let i = 0; i < this.properties.objNum.value; i++) {
    
    
          const cubeMesh = this.addCube()
          cubeMesh.updateMatrix()
          geometry.merge(cubeMesh.geometry, cubeMesh.matrix)
        }
        this.scene.add(new THREE.Mesh(geometry, cubeMaterial))
      } else {
    
    
        for (let i = 0; i < this.properties.objNum.value; i++) {
    
    
          const cube = this.addCube()
          this.scene.add(cube)
        }
      }
    },

    redraw () {
    
    
      const toRemove = []
      this.scene.traverse(e => {
    
    
        if (e instanceof THREE.Mesh) toRemove.push(e)
      })
      toRemove.forEach(e => {
    
    
        this.scene.remove(e)
      })
      this.createCubes()
    },
    animation () {
    
    
      this.rotation += 0.005
      this.camera.position.x = Math.sin(this.rotation) * 50
      this.camera.position.z = Math.cos(this.rotation) * 50
      this.camera.lookAt(this.scene.position)
    },
    render () {
    
    
      this.animation()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
    
    
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
    
    
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
    
    
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.vertice-span {
    
    
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

vueを使用してthree.jsを学習し、THREE.Geometry.merge（）関数を介して高度なジオメトリマージメッシュを作成およびロードします

THREE.Geometry.merge関数を使用してグリッドをマージします