什么事mesh模型的根节点合并

转载

killads 2025-05-16 16:28:36

文章标签 什么事mesh模型的根节点合并 webgl vue javascript js 文章分类 架构后端开发

材质分类及MeshBasicMaterial材质使用

一、材质的分类

1.1网格基础材质-MeshBasicMaterial
1.2网格深度材质-MeshDepthMaterial
1.3网格法向材质-MeshNormalMaterial
1.4网格面材质-MeshFaceMaterial
1.5网格朗伯材质-MeshLamberMaterial
1.6网格Phong材质-MeshPhongMaterial
1.7着色器材质-ShaderMaterial
1.8直线基础材质-LineBasicMaterial
1.9虚线-LineDashedMaterial

二、材质的共有属性

2.1基础共性
2.2融合属性
2.3高级属性

三、MeshBasicMaterial材质属性介绍
四、demo说明
五、demo代码

一、材质的分类

我们知道材质结合几何体可以构建网格，材质就像物体的皮肤，决定了物体长什么样子，常用的材质主要有以下九种

1.1网格基础材质-MeshBasicMaterial

基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框

1.2网格深度材质-MeshDepthMaterial

根据网格到相机的距离，这种材质决定如何给网格染色

1.3网格法向材质-MeshNormalMaterial

这是一种简单的材质，根据物体表面的法向量计算颜色

1.4网格面材质-MeshFaceMaterial

这是一个容器，可以在这个容器里为物体的各个表面指定不同的颜色

1.5网格朗伯材质-MeshLamberMaterial

这种材质会考虑光照的影响，可以用来创建颜色暗淡、不光亮的物体

1.6网格Phong材质-MeshPhongMaterial

这种材质也会考虑光照的影响，而且可以用来创建光亮的物体

1.7着色器材质-ShaderMaterial

这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式和像素的着色方式

1.8直线基础材质-LineBasicMaterial

这种材质可以用于THREE.Line几何体，从而创建着色器直线

1.9虚线-LineDashedMaterial

这种材质跟直线基础材质一样，不过可以用来创建一种虚线效果

二、材质的共有属性

材质有一个基类THREE.Material，这个类列出了所有共有属性，我们把这些共有属性分为三类

2.1基础共性

属性	描述
id	标识符：用来标识材质，在创建时赋值
name	名称：可以通过此属性赋予材质名称
opacity	透明度：定义物体有多透明。与属性 transparent 一起使用才有效。取值范围是 0~1
transparent	是否透明：决定物体是否透明。如果设为 true，three.js 就会根据 opacity 的值来渲染物体；否则，这个物体就不透明
overdraw	过度绘制：当采用 THREE.CanvasRenderer （画布渲染器）进行渲染时，多边形会被渲染得稍大一点。即当使用这个渲染器画出来的物体有缝隙时，可以将此属性设置为 true
visible	是否可见：定义此材质是否可见。设为 false 时，那么在场景中就看不到该物体
side	侧面：通过此属性，可以决定在几何体的哪一面应用该材质。默认是 THREE.FrontSide （前面或外面）；还有 THREE.BackSide （后面或里面）；以及 THREE.DoubleSide （双面或双侧）
needsUpdate	是否刷新：对于材质的某些修改，需要告诉 three.js 材质已经改变了。如果这个属性设为 true，three.js 就会使用修改后的材质属性刷新它的缓存

2.2融合属性

名称	描述
blending	融合：决定物体上的材质如何跟背景融合。融合模式一般是 NormalBlending，在这种模式下只显示材质的上层
blendsrc	融合源：除了使用标准融合模式外，还可以通过指定 blendsrc、blenddst 及 blendequation 三个属性来创建自定义的融合模式。此属性指定物体（源）如何跟背景（目标）相融合。默认值是 SrcAlphaFactor，即用 alpha（透明度）通道进行融合
blenddst	融合目标：此属性定义融合时如何使用背景（目标），默认是 OneMinusSrcAlphaFactor，其含义是：目标也使用源的 alpha 通道进行融合，只是用的值是 1 （源的 alpha 通道值）
blendingequation	融合公式：指定如何使用 blendsrc 和 blenddst 的值。默认方法是 AddEquation，即将两者颜色的值相加。使用这三个属性，就可以创建自定义的融合模式

2.3高级属性

属性	描述
depthTest	深度测试：这是一个高级WebGL属性，使用这个参数可以打开或关闭GL_DEPTH_TEST参数，该参数决定像素深度是否用来计算新的像素值，通常情况下不必修改这个属性，更多信息可以在OpenGL规范中找到
depthWrite	这是一个内部属性，可以用来决定这个材质是否影响WebGL的深度缓存，如果你将一个物体用作二维贴图时，应该将这个属性设置为false，一般不会修改这个属性
polygonOffset 、polygonOffsetFactor、polygonOffsetUnits	通过这些属性可以控制WebGL的POLYGON_OFFSET_FILL功能，一般不需要使用它们
alphaTest	这个属性的值是一个0~1的数字，表示如果某个像素的alpha值小于这个值，那么像素就不会显示出来

三、MeshBasicMaterial材质属性介绍

网格基础材质是一种非常简单的材质，这种材质不考虑光照的影响，该材质主要有以下属性

属性	描述
color	颜色：设置材质的颜色
wireframe	线框：当此属性设为 true 时，物体将显示为线框。这对调试非常有利
wireframeLinewidth	线框宽度：线框模式下，此属性设置线框的宽度。`由于WebGLRenderer 不支持该属性，所以无论如何设置该值，线宽始终为1。`
wireframeLinecap	线框线端点：此属性定义线框模式下，顶点间线段的断点如何显示。可选的值有 round（圆）、butt（平）和square（方）三种。默认是 round。对于这个属性的修改结果在实际使用中很难看出来。WebGLRenderer 不支持该属性
wireframeLinejoin	线框连接：此属性定义线框模式下，线段的连接点如何显示。可选的值有 round（圆）、bevel（斜角）和 miter（尖角）三种。默认是 round。WebGLRenderer 不支持该属性
shading	着色：此属性定义如何着色。可选的值有 THREE.SmoothShading 和 THREE.FlatShading 两种
vertexColors	顶点颜色：可以通过此属性为每一个顶点定义不同的颜色。CanvasRenderer 不支持该属性
fox	雾化：此属性指定当前材质是否会受全局雾化效果设置的影响。如果设置成 false，那么全局的雾化效果设置就不会影响当前物体的渲染

四、demo说明

什么事mesh模型的根节点合并_什么事mesh模型的根节点合并

如上图，该示例支持以下功能

通过mesh下拉选择创建正方体、球体或平面
调整材质是否可见
调整材质的颜色
调整是否透明属性和透明度
调整是否显示边框线
调整side属性

五、demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <el-col :span="8" class="label-col"><label>mesh</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.selectMesh" placeholder="请选择">
              <el-option v-for="item in selectMeshOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.visible">是否可见</el-checkbox>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> 材质颜色</label></el-col>
          <el-col :span="16">
            <div @click="inputClick">
              <el-input :value="properties.color"></el-input>
            </div>
            <div v-show="isShowColors" class="color-select-layer">
              <sketch-picker v-model="properties.color" @input="colorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.transparent">是否透明</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.wireframe">是否渲染为线框</el-checkbox>
        </el-row>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined&&(item.name=='opacity'&&properties.transparent)||(item.name=='linewidth'&&properties.wireframe)">
              <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"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value}}</span>
              </el-col>
            </div>
          </div>

        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label>side</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.side" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

      </section>

    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Sketch } from 'vue-color'
export default {
  components: {
    'sketch-picker': Sketch
  },
  data () {
    return {
      options: [
        {
          value: 'front',
          label: 'front'
        },
        {
          value: 'back',
          label: 'back'
        },
        {
          value: 'double',
          label: 'double'
        }
      ],
      selectMeshOptions: [
        {
          value: 'cube',
          label: 'cube'
        },
        {
          value: 'sphere',
          label: 'sphere'
        },
        {
          value: 'plane',
          label: 'plane'
        }
      ],
      properties: {
        opacity: {
          name: 'opacity',
          value: 0.3,
          min: 0,
          max: 1,
          step: 0.1
        },
        wireframeLinewidth: {
          name: 'linewidth',
          value: 5,
          min: 0,
          max: 20,
          step: 1
        },
        selectMesh: 'cube',
        side: 'front',
        transparent: false,
        wireframe: true,
        visible: true,
        color: '#ccffcc'
      },
      isShowColors: false,
      cube: null,
      sphere: null,
      plane: null,
      meshMaterial: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    inputClick () {
      this.isShowColors = !this.isShowColors
    },
    colorChange (val) {
      this.properties.color = val.hex
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCubeAndSphere() // 创建方块和球
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const planeGeometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x777777
      }) // 材质对象Material
      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, -20, 0)

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建方块和球
    createCubeAndSphere () {
      const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
      const cubeGeometry = new THREE.BoxGeometry(15, 15, 15)
      const planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4)

      this.meshMaterial = new THREE.MeshBasicMaterial({
        color: 0x7777ff
      })

      this.sphere = new THREE.Mesh(sphereGeometry, this.meshMaterial)
      this.cube = new THREE.Mesh(cubeGeometry, this.meshMaterial)
      this.plane = new THREE.Mesh(planeGeometry, this.meshMaterial)

      this.sphere.position.set(-12, 3, 2)

      this.cube.position = this.sphere.position
      this.plane.position = this.sphere.position

      this.scene.add(this.cube)
    },

    // 创建光源
    createLight () {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(-40, 60, -10)
      spotLight.castShadow = true
      this.scene.add(spotLight)
    },
    // 创建相机
    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(35, k, 0.1, 1000)
      this.camera.position.set(-80, 60, 40) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(10, 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.shadowMap.enabled = true // 显示阴影
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    updateMesh (selectMesh) {
      this.scene.remove(this.plane)
      this.scene.remove(this.cube)
      this.scene.remove(this.sphere)

      switch (selectMesh) {
        case 'cube':
          this.scene.add(this.cube)
          break
        case 'sphere':
          this.scene.add(this.sphere)
          break
        case 'plane':
          this.scene.add(this.plane)
          break
      }
    },
    updateSide (side) {
      switch (side) {
        case 'front':
          this.meshMaterial.side = THREE.FrontSide
          break
        case 'back':
          this.meshMaterial.side = THREE.BackSide
          break
        case 'double':
          this.meshMaterial.side = THREE.DoubleSide
          break
      }
      this.meshMaterial.needsUpdate = true
    },
    // 更新属性
    updateFun () {
      this.meshMaterial.color.setStyle(this.properties.color)
      this.meshMaterial.opacity = this.properties.opacity.value
      this.meshMaterial.wireframeLinewidth = this.properties.wireframeLinewidth.value
      this.meshMaterial.transparent = this.properties.transparent
      this.meshMaterial.wireframe = this.properties.wireframe
      this.meshMaterial.visible = this.properties.visible

      this.updateMesh(this.properties.selectMesh)
      this.updateSide(this.properties.side)
    },
    render () {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target.copy(this.plane.position)
    }
  }
}
</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;
}
.label-col {
  padding: 8px 5px;
}
.color-select-layer {
  position: relative;
  left: -20px;
  padding: 15px 0;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。