three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合
预览
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'const DOM = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, DOM.clientWidth / DOM.clientHeight, 0.1, 1000)camera.position.set(10, 10, 10)const renderer = new THREE.WebGLRenderer()renderer.setSize(DOM.clientWidth, DOM.clientHeight)DOM.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)scene.add(new THREE.AxesHelper(500))// Css3DOM
const css3DRender = setCss3DRenderer(DOM)// Css2DOM
const css2DRender = setCss2DRenderer(DOM)const setCss2dDOM = (DOM, position) => {DOM.style.pointerEvents = 'auto'const mesh = new CSS2DObject(DOM)mesh.position.copy(position)scene.add(mesh)return mesh}const setCss3dDOM = (DOM, position) => {const mesh = new CSS3DObject(DOM)mesh.position.copy(position)scene.add(mesh)return mesh}for (let i = 0; i < 5; i++) {setCss2dDOM(createDom('2D' + i), { x: 0, y: 0, z: i * 2 }) // 2d domsetCss3dDOM(createDom('3D' + i), { x: 0, y: i * 2, z: 0 }).scale.multiplyScalar(0.02) // 3d dom}animate()function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)css3DRender.render(scene, camera) // Css3D渲染css2DRender.render(scene, camera) // Css2D渲染}window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()css3DRender.resize()css2DRender.resize()}// 创建dom
function createDom(text) {const div = document.createElement('div')const img = document.createElement('img')img.src = `https://threehub.cn/` + '/files/author/z2586300277.png'img.style.width = '50px'img.style.height = '50px'div.appendChild(img)div.innerHTML += textdiv.style.color = 'white'return div}/* css2d渲染 */
function setCss2DRenderer(DOM) {const css2DRender = new CSS2DRenderer()css2DRender.resize = () => {css2DRender.setSize(DOM.clientWidth, DOM.clientHeight)css2DRender.domElement.style.zIndex = 0css2DRender.domElement.style.position = 'relative'css2DRender.domElement.style.top = -DOM.clientHeight * 2 + 'px'css2DRender.domElement.style.height = DOM.clientHeight + 'px'css2DRender.domElement.style.width = DOM.clientWidth + 'px'css2DRender.domElement.style.pointerEvents = 'none'}css2DRender.resize()DOM.appendChild(css2DRender.domElement)return css2DRender}/* css3d 渲染 */
function setCss3DRenderer(DOM) {const css3DRender = new CSS3DRenderer()css3DRender.resize = () => {css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)css3DRender.domElement.style.zIndex = 0css3DRender.domElement.style.position = 'relative'css3DRender.domElement.style.top = -DOM.clientHeight + 'px'css3DRender.domElement.style.height = DOM.clientHeight + 'px'css3DRender.domElement.style.width = DOM.clientWidth + 'px'css3DRender.domElement.style.pointerEvents = 'none'}css3DRender.resize()DOM.appendChild(css3DRender.domElement)return css3DRender}/*** 名称: CSS元素* 作者: 优雅永不过时 https://github.com/z2586300277
*/
