基于VUE的threeJs学习笔记02：成功实现将josn数据解析为3D模型的示例

坚持努力才最重要

已于 2022-10-13 13:39:37 修改

阅读量605

点赞数

分类专栏： threeJs 文章标签：学习 3d javascript

于 2022-10-13 11:25:56 首次发布

本文链接：https://blog.csdn.net/weixin_44996006/article/details/127297993

版权

threeJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

threeJs版本为0.145.0

<template>
  <div>
    <div id="threeContained_4_1"></div>
  </div>
</template>
<script>
// 参考示例： D:\tyler\learning\threejs\three.js-dev\examples\webgl_geometry_colors_lookuptable.html
import * as THREE from 'three' // 引入Threejs
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { Lut } from 'three/examples/jsm/math/Lut'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
export default {
  name: 'ThreeDExample4',
  data () {
    return {
      showType: 1,
      threeJs: {
        perpCamera: '',
        orthoCamera: '',
        renderer: '',
        lut: '',
        mesh: '',
        sprite: '',
        scene: '',
        uiScene: '',
        params: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    changeShow (type) {
      this.showType = type
    },
    init () {
      this.threeJs.scene = new THREE.Scene()
      this.threeJs.scene.background = new THREE.Color(0xffffff)
      this.threeJs.uiScene = new THREE.Scene()
      this.threeJs.lut = new Lut()
      const width = window.innerWidth
      const height = window.innerHeight
      this.threeJs.perpCamera = new THREE.PerspectiveCamera(60, width / height, 1, 100)
      this.threeJs.perpCamera.position.set(0, 0, 10)
      this.threeJs.scene.add(this.threeJs.perpCamera)
      this.threeJs.orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 2)
      this.threeJs.orthoCamera.position.set(0.5, 0, 1)
      this.threeJs.sprite = new THREE.Sprite(new THREE.SpriteMaterial({
        map: new THREE.CanvasTexture(this.threeJs.lut.createCanvas())
      }))
      this.threeJs.sprite.scale.x = 0.125
      this.threeJs.uiScene.add(this.threeJs.sprite)
      this.threeJs.mesh = new THREE.Mesh(undefined, new THREE.MeshLambertMaterial({
        side: THREE.DoubleSide,
        color: 0xF5F5F5,
        vertexColors: true
      }))
      this.threeJs.scene.add(this.threeJs.mesh)
      this.threeJs.params = {
        colorMap: 'rainbow'
      }
      this.loadModel()
      const pointLight = new THREE.PointLight(0xffffff, 1)
      this.threeJs.perpCamera.add(pointLight)
      this.threeJs.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.threeJs.renderer.autoClear = false
      this.threeJs.renderer.setPixelRatio(window.devicePixelRatio)
      this.threeJs.renderer.setSize(width, height)
      const container = document.getElementById('threeContained_4_1')
      container.appendChild(this.threeJs.renderer.domElement)
      window.addEventListener('resize', this.onWindowResize())
      const controls = new OrbitControls(this.threeJs.perpCamera, this.threeJs.renderer.domElement)
      controls.addEventListener('change', this.render)
      const gui = new GUI()
      const that = this
      gui.add(this.threeJs.params, 'colorMap', ['rainbow', 'cooltowarm', 'blackbody', 'grayscale']).onChange(function () {
        that.updateColors()
        that.render()
      })
    },
    onWindowResize () {
      const width = window.innerWidth
      const height = window.innerHeight
      this.threeJs.perpCamera.aspect = width / height
      this.threeJs.perpCamera.updateProjectionMatrix()
      this.threeJs.renderer.setSize(width, height)
      this.render()
    },
    /**
     * 纹理加载器对象
     */
    loadModel () {
      const that = this
      const loader = new THREE.BufferGeometryLoader()
      loader.load('http://localhost:3002/public/getFile?filename=pressure.json', function (geometry) {
        geometry.center()
        geometry.computeVertexNormals()
        // default color attribute
        const colors = []
        for (let i = 0, n = geometry.attributes.position.count; i < n; ++i) {
          colors.push(1, 1, 1)
        }
        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
        that.threeJs.mesh.geometry = geometry
        that.updateColors()
        that.render()
      })
    },
    render () {
      this.threeJs.renderer.clear()
      this.threeJs.renderer.render(this.threeJs.scene, this.threeJs.perpCamera)
      this.threeJs.renderer.render(this.threeJs.uiScene, this.threeJs.orthoCamera)
    },
    updateColors () {
      this.threeJs.lut.setColorMap(this.threeJs.params.colorMap)
      this.threeJs.lut.setMax(2000)
      this.threeJs.lut.setMin(0)
      const geometry = this.threeJs.mesh.geometry
      const pressures = geometry.attributes.pressure
      const colors = geometry.attributes.color
      for (let i = 0; i < pressures.array.length; i++) {
        const colorValue = pressures.array[i]
        const color = this.threeJs.lut.getColor(colorValue)
        if (color === undefined) {
          console.log('Unable to determine color for value:', colorValue)
        } else {
          colors.setXYZ(i, color.r, color.g, color.b)
        }
      }
      colors.needsUpdate = true
      const map = this.threeJs.sprite.material.map
      this.threeJs.lut.updateCanvas(map.image)
      map.needsUpdate = true
    }
  }
}
</script>
<style scoped>
</style>