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

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>

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值