threejs灏勭嚎鎷惧彇锛堟ā鍨嬬偣鍑讳簨浠讹級浠ュ強鎺у埗妯″瀷闅愯棌

Posted 2021-09-14 鍙嬩汉A

onMouseClick()鏂规硶瀹炵幇灏勭嚎鎷惧彇
鍒涘缓妯″瀷鐨勬椂鍊欏彲浠ュ皢mesh鐨刧roup鐗瑰埆鎻愬嚭鏉?/p>

gltf.scene.traverse((child) => {
    if (child.isGroup) {
      child.name = \'dikuai\'
      this.groups.push(child);
    }
  });

涓嬮潰鏄畬鏁翠唬鐮侌煈囸煈?/strong>

<template>
  <div class="main-3d">
    <div id="scene-container" ref="sceneContainer"></div>
    <div class="tool-box">
      <div class="tool-site flexC" @click="show">闅愯韩</div>
      <div class="tool-site flexC" @click="isRotate=!isRotate">鏃嬭浆</div>
    </div>
  </div>
</template>

<script>
import * as THREE from \'three\'
import { OrbitControls } from \'three/examples/jsm/controls/OrbitControls\'
import { GLTFLoader } from \'three/examples/jsm/loaders/GLTFLoader\'
export default {
  name: \'HelloWorld\',
  data () {
    return {
      container: null,
      scene: null,
      camera: null,
      controls: null,
      renderer: null,
      stats: null,
      models:null,
      isRotate:false,
      groups:[]
    }
  },
  methods: {
    onMouseClick() {
      let that = this;
      debugger
      function onMouseClick(event) {
        let a = document.getElementsByTagName("canvas")
        var canvas
        for(let i of a){
          if(i.parentElement&&i.parentElement.id&&i.parentElement.id =="scene-container"){
            canvas = i
          }
        }
        let x =
          ((event.clientX - canvas.getBoundingClientRect().left) /
            canvas.offsetWidth) *
            2 -
          1; // 鏍囧噯璁惧妯潗鏍?
        // 杩欓噷鐨刴ainCanvas鏄釜dom鍏冪礌,getBoundingClientRectangle浼氳繑鍥炲綋鍓嶅厓绱犵殑瑙嗗彛澶у皬.

        let y =
          -(
            (event.clientY - canvas.getBoundingClientRect().top) /
            canvas.offsetHeight
          ) *
            2 +
          1; // 鏍囧噯璁惧绾靛潗鏍?
        let standardVector = new THREE.Vector3(x, y, 1); // 鏍囧噯璁惧鍧愭爣

        // 鏍囧噯璁惧鍧愭爣杞笘鐣屽潗鏍?
        let worldVector = standardVector.unproject(that.camera);

        // 灏勭嚎鎶曞皠鏂瑰悜鍗曚綅鍚戦噺(worldVector鍧愭爣鍑忕浉鏈轰綅缃潗鏍?

        let ray = worldVector.sub(that.camera.position).normalize();

        // 鍒涘缓灏勭嚎鎶曞皠鍣ㄥ璞?
        let raycaster = new THREE.Raycaster(that.camera.position, ray);

        // 鑾峰彇raycaster鐩寸嚎鍜屾墍鏈夋ā鍨嬬浉浜ょ殑鏁扮粍闆嗗悎
        var intersects = raycaster.intersectObjects(that.scene.children, true);
        if (intersects.length > 0) {
          console.log(1);
        }
      }
      //杩欎釜鍦版柟涓€瀹氱敤renderer.domElement鍗冧竾鍒敤window锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛侊紒锛佸潙
      that.renderer.domElement.addEventListener("click", onMouseClick, false);
    },
    show(){
      
    },
    hide(){
      let a = this.groups.find( item => item.name==\'dikuai\')
      a.children.forEach(element => {
        element.material.transparent = true
        element.material.opacity = 0
      });
    },
    init () {
      // set container
      this.container = this.$refs.sceneContainer

      // add stats

      // add camera
      const fov = 60 // Field of view
      const aspect = this.container.clientWidth / this.container.clientHeight
      const near = 20 // the near clipping plane
      const far = 300 // the far clipping plane
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(0, 50, 100)
      this.camera = camera

      // create scene
      this.scene = new THREE.Scene()
      this.scene.background = new THREE.Color(\'skyblue\')


      var hemiLight = new THREE.HemisphereLight( 0xffff55, 0x00ffff, 0.6 );
      hemiLight.position.set(0,-100,0)

        var helper = new THREE.HemisphereLightHelper( hemiLight, 5 );
        this.scene.add( helper );



      const mainLight = new THREE.DirectionalLight(0xffffff, 4.0)
      mainLight.position.set(10, 50, 10)
      this.scene.add(mainLight,hemiLight)

      const mainLight2 = new THREE.DirectionalLight(0xffffff, 4.0)
      mainLight2.position.set(-10, -50, -10)
      this.scene.add(mainLight2,hemiLight)

      
      

      // add controls
      this.controls = new OrbitControls(this.camera, this.container)

      // create renderer
      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.gammaFactor = 2.2
      this.renderer.outputEncoding = THREE.sRGBEncoding
      this.renderer.physicallyCorrectLights = true
      this.container.appendChild(this.renderer.domElement)

      // set aspect ratio to match the new browser window aspect ratio
      this.camera.aspect = this.container.clientWidth / this.container.clientHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)

      const loader = new GLTFLoader()

      loader.load(
        \'/glb/aaa.glb\',
        gltf => {
          debugger
          this.models = gltf.scene
          this.scene.add(this.models)
          gltf.scene.traverse((child) => {
            if (child.isGroup) {
              child.name = \'dikuai\'
              this.groups.push(child);
            }
          });
          console.log(this.groups);
        },
        undefined,
        undefined
      )

      this.renderer.setAnimationLoop(() => {
        this.rotate()
        this.render()
      })
    },
    render () {
      this.renderer.render(this.scene, this.camera)
    },
    rotate() {
      if(!this.isRotate){return false}
      // this.models.rotation.z += 0.01;
      // this.models.rotation.x += 0.01;
      // this.models.rotation.y += 0.01;
      this.models.rotateY(0.01);
    }
  },
  mounted () {
    this.init()
    this.onMouseClick()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main-3d{
  width: 100%;
  height: 100%;
  .tool-box{
    position: fixed;
    bottom: 10px;
    right: 10px;
    .tool-site{
      width: 48px;
      height: 36px;
      background: red;
      cursor: pointer;
    }
  }
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#scene-container {
  height: 100%;
}
</style>