threeJS嵌入可交互的普通页面

最新推荐文章于 2025-06-17 14:15:05 发布

魈傩

最新推荐文章于 2025-06-17 14:15:05 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习 3D学习文章标签： vue.js 前端 threejs three.js 3d

本文链接：https://blog.csdn.net/weixin_42077503/article/details/127922758

前端学习同时被 2 个专栏收录

31 篇文章

订阅专栏

3D学习

3 篇文章

订阅专栏

本文介绍如何使用CSS3DRenderer渲染器在3D场景中嵌入交互式网页内容，通过具体实例展示了如何设置和应用CSS3DRenderer，并提供了代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:

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

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

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

代码（是第一个地图的例子哦）

<!--
 * @Author: WJT
 * @Date: 2022-11-16 16:56:42
 * @Description: file content
-->

<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>