threeJS嵌入可交互的普通页面

• 效果图:

        1.这是我将一个地图当作地面，外面再包一个天空盒就更好看了

         2.上面的例子可能不够直观，下面这个例子是嵌入的bilibili官网，嵌入的网页内容可以正常交互

• 关键
  关键是用到了CSS3DRenderer渲染器。CSS3DRenderer仅仅关注普通的DOM元素，这些元素被包含到了特殊的对象中（CSS3DObject或者CSS3DSprite），然后被加入到场景图中。
• 代码（是第一个地图的例子哦）

   
  <template>
    <div class="webgl-container">
      <div id="webglDom"
           ref="webglDom">div>
    div>
  template>
   
  <script>
  import * as THREE from 'three'
  // import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
   
  export default {
    name: 'threeJSMap',
    data () {
      return {
        controls: null,
        camera: null,
        glScene: null,
        cssScene: null,
        cssRenderer: null
      }
    },
    mounted () {
      this.initialize()
    },
    methods: {
      createCssRenderer () {
        const cssRenderer = new CSS3DRenderer()
   
        cssRenderer.setSize(window.innerWidth, window.innerHeight)
   
        cssRenderer.domElement.style.position = 'absolute'
        cssRenderer.domElement.style.top = 0
   
        return cssRenderer
      },
      createCssObject (w, h, position, rotation, url) {
        const iframe = document.createElement('iframe')
        iframe.src = 'http://localhost:8081/demo-web/#/map' // 写你自己要嵌入的网页地址即可
        iframe.style.width = w + 'px'
        iframe.style.height = h + 'px'
        iframe.style.border = '0px'
        const cssObject = new CSS3DObject(iframe)
   
        cssObject.position.x = position.x
        cssObject.position.y = position.y
        cssObject.position.z = position.z
   
        cssObject.rotation.x = rotation.x
        cssObject.rotation.y = rotation.y
        cssObject.rotation.z = rotation.z
        return cssObject
      },
      create3dPage (w, h, position, rotation, url) {
        const cssObject = this.createCssObject(
          w, h,
          position,
          rotation,
          url)
        this.cssScene.add(cssObject)
      },
      initialize () {
        this.camera = new THREE.PerspectiveCamera(
          45,
          window.innerWidth / window.innerHeight,
          1,
          10000)
   
        this.camera.position.set(0, 30, 100)
   
        this.cssRenderer = this.createCssRenderer()
   
        document.getElementById('webglDom').appendChild(this.cssRenderer.domElement)
   
        this.controls = new OrbitControls(this.camera, this.cssRenderer.domElement)
        // 定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。 否则，摄像机将在与摄像机向上方向垂直的平面中平移。
        this.controls.screenSpacePanning = true
        this.controls.minDistance = 10
        this.controls.maxDistance = 500
        this.controls.maxPolarAngle = Math.PI / 2
   
        this.glScene = new THREE.Scene()
        this.cssScene = new THREE.Scene()
   
        const ambientLight = new THREE.AmbientLight(0x555555)
        this.glScene.add(ambientLight)
   
        const directionalLight = new THREE.DirectionalLight(0xffffff)
        directionalLight.position.set(-0.5, 0.5, -1.5).normalize()
        this.glScene.add(directionalLight)
   
        this.create3dPage(
          1000, 1000,
          new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(-90 * Math.PI / 180, 0, 0),
          'http://localhost:8081/demo-web/#/map')
   
        this.update()
      },
      update () {
        this.controls.update()
   
        this.cssRenderer.render(this.cssScene, this.camera)
   
        requestAnimationFrame(this.update)
      }
    }
  }
  script>
   
  <style scoped>
  #webglDom,
  .webgl-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  style>