效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/dd162e187f19489f85436f9b6ec0950f.png#pic_center)
源码
import { useEffect, useRef } from 'react'
import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'
const Demo12 = () => {
let scene, camera, renderer, orbitControls, axes
useEffect(() => {
init()
}, [])
const ThreeContainer = useRef()
// 场景,作为容器,保存并跟踪所有渲染的物体
const initScene = () => {
scene = new T.Scene()
}
// 相机
const initCamera = () => {
// 透视相机,参数:视场,长宽比,近面,远面
camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 150
camera.lookAt(scene.position)
}
// 渲染器,计算指定相机角度下,浏览器中scene的样子
const initRenderer = () => {
// css 3d 渲染器
renderer = new CSS3DRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
// 将render的输出挂载到HTML页面框架中的元素上
ThreeContainer.current.append(renderer.domElement)
}
// 坐标轴
const initAxes = () => {
axes = new T.AxesHelper(20)
scene.add(axes)
}
// 坐标格
const initGridHelper = () => {
// 参数:坐标格尺寸,坐标格细分次数,中线颜色,坐标格网格线颜色.
const gridHelper = new T.GridHelper(100, 10, 0xff0000, 0x00ffff)
scene.add(gridHelper)
}
// 轨道控制器
const initOrbitControls = () => {
orbitControls = new OrbitControls(camera, renderer.domElement)
}
// 创建iframe
const createCssObject = () => {
const iframe = document.createElement('iframe')
iframe.src = 'https://blog.csdn.net/weixin_43794073?type=blog'
iframe.style.width = '1920px'
iframe.style.height = '1080px'
iframe.style.background = '#f00'
iframe.style.border = '10px solid #1890ff'
iframe.style.boxShadow = '0 0 20px #ff0000'
// CSS3DObject 将dom元素转换为3d元素
const cssObj = new CSS3DObject(iframe)
cssObj.position.set(0, 0, 0)
cssObj.scale.set(0.1, 0.1, 0.1)
scene.add(cssObj)
}
// 渲染场景
const renderScene = () => {
requestAnimationFrame(renderScene)
renderer.render(scene, camera)
}
const resize = () => {
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}, false)
}
// 初始化
const init = () => {
initScene()
initCamera()
initRenderer()
initOrbitControls()
initAxes()
initGridHelper()
createCssObject()
renderScene()
resize()
}
return (
<div ref={ThreeContainer} />
)
}
export default Demo12