three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合

three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合

预览

bash 复制代码
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 dom

    setCss3dDOM(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.clientHeight

    camera.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 += text

    div.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 = 0

        css2DRender.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 = 0

        css3DRender.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
*/
相关推荐
高山我梦口香糖34 分钟前
[react] <NavLink>自带激活属性
前端·javascript·react.js
撸码到无法自拔38 分钟前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖39 分钟前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
代码cv移动工程师42 分钟前
HTML语法规范
前端·html
Elena_Lucky_baby1 小时前
实现路由懒加载的方式有哪些?
前端·javascript·vue.js
Domain-zhuo1 小时前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
理想不理想v1 小时前
webpack如何自定义插件?示例
前端·webpack·node.js
小华同学ai1 小时前
ShowDoc:Star12.3k,福利项目,个人小团队的在线文档“简单、易用、轻量化”还专门针对API文档、技术文档做了优化
前端·程序员·github
一雨方知深秋1 小时前
智慧商城:封装getters实现动态统计 + 全选反选功能
开发语言·javascript·vue2·foreach·find·every
海威的技术博客1 小时前
关于JS中的this指向问题
开发语言·javascript·ecmascript