three.js基础案例day15——一起看场电影吧（CSS3DRenderer）

最新推荐文章于 2024-02-25 10:30:00 发布

樱桃园园长

最新推荐文章于 2024-02-25 10:30:00 发布

阅读量552

点赞数 7

文章标签： javascript css3 开发语言

本文链接：https://blog.csdn.net/qq_46056472/article/details/135129773

版权

本文介绍了如何在Vue项目中使用Three.js库的CSS3DRenderer创建3D场景，展示了如何嵌入动态的iframe并实现基本的3D旋转效果。

摘要由CSDN通过智能技术生成

今天这个案例主要是学习CSS3DRenderer这个渲染器。具体效果如下：

首先需要创建基础环境，场景、相机、控制器，这个案例使用的是CSS3DRenderer，下面会有相关代码。

1.导入并使用CSS3DRenderer

// 导入
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
// 使用
renderer = new CSS3DRenderer()
renderer.setSize(width, height)

elementRef.value.appendChild(renderer.domElement)

2.创建一个函数，目的是创建一个包含一个url链接的iframe的CSS3D对象

function creatCSS3DObject( url, x, y, z, ry ) {
  // 创建<div>
  const div = document.createElement('div')
  div.style.width = '800px'
  div.style.height = '600px'
  div.style.backgroundColor = '#000'

  // 创建<iframe>
  const iframe = document.createElement('iframe')
  iframe.style.width = '800px'
  iframe.style.height = '600px'
  iframe.style.border = '0px'
  iframe.src = url

  div.appendChild( iframe )

  // 创建CSS3DObject
  const css3DObject = new CSS3DObject( div )
  css3DObject.position.set(x, y, z)
  css3DObject.rotation.y = ry
  return css3DObject
}

3.使用这个对象

let group = new THREE.Group()
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 0, 0, 400, 0))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 400, 0, 0, Math.PI / 2))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 0, 0, -400, 0))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', -400, 0, 0, -Math.PI / 2))
  scene.add(group)

全部代码：

<template>
  <div id="threeId" ref="elementRef"></div>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
import {ref, onMounted} from 'vue'
const elementRef = ref(null)
let width, height
let scene, camera, renderer, controls
onMounted(() => {
  const element = elementRef.value
  width = element.offsetWidth
  height = element.offsetHeight
  initScene()
  initGroup()
  render()
})
function initScene() {
  scene = new THREE.Scene()
  scene.backgroundColor = new THREE.Color(0x000)
  camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000)
  camera.position.set(0, 5, 1000)
  scene.add(camera)

  // const axesHelper = new THREE.AxesHelper(40)
  // scene.add(axesHelper)

  renderer = new CSS3DRenderer()
  renderer.setSize(width, height)

  elementRef.value.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
}
function creatCSS3DObject( url, x, y, z, ry ) {
  // 创建<div>
  const div = document.createElement('div')
  div.style.width = '800px'
  div.style.height = '600px'
  div.style.backgroundColor = '#000'

  // 创建<iframe>
  const iframe = document.createElement('iframe')
  iframe.style.width = '800px'
  iframe.style.height = '600px'
  iframe.style.border = '0px'
  iframe.src = url

  div.appendChild( iframe )

  // 创建CSS3DObject
  const css3DObject = new CSS3DObject( div )
  css3DObject.position.set(x, y, z)
  css3DObject.rotation.y = ry
  return css3DObject
}
function initGroup() {
  let group = new THREE.Group()
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 0, 0, 400, 0))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 400, 0, 0, Math.PI / 2))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', 0, 0, -400, 0))
  group.add(creatCSS3DObject('https://haokan.baidu.com/v?pd=wisenatural&vid=10851568774177390746', -400, 0, 0, -Math.PI / 2))
  scene.add(group)
}
function render() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
</script>

<style scoped>
#threeId {
  width: 100%;
  height: 100%;
}
</style>