Three.js css2d Css3D的利用

Three.js css2d Css3D的利用

1. import * as THREE from 'three'
2. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
3. import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
4. import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
6. const DOM = document.getElementById('box')
8. const scene = new THREE.Scene()
10. const camera = new THREE.PerspectiveCamera(75, DOM.clientWidth / DOM.clientHeight, 0.1, 1000)
12. camera.position.set(10, 10, 10)
14. const renderer = new THREE.WebGLRenderer()
16. renderer.setSize(DOM.clientWidth, DOM.clientHeight)
18. DOM.appendChild(renderer.domElement)
20. new OrbitControls(camera, renderer.domElement)
22. scene.add(new THREE.AxesHelper(500))
24. // Css3DOM
25. const css3DRender = setCss3DRenderer(DOM)
27. // Css2DOM
28. const css2DRender = setCss2DRenderer(DOM)
30. const setCss2dDOM = (DOM, position) => {
32.     DOM.style.pointerEvents = 'auto'
34.     const mesh = new CSS2DObject(DOM)
36.     mesh.position.copy(position)
38.     scene.add(mesh)
40.     return mesh
42. }
45. const setCss3dDOM = (DOM, position) => {
47.     const mesh = new CSS3DObject(DOM)
49.     mesh.position.copy(position)
51.     scene.add(mesh)
53.     return mesh
55. }
57. for (let i = 0; i < 5; i++) {
59.     setCss2dDOM(createDom('2D' + i), { x: 0, y: 0, z: i * 2 }) // 2d dom
61.     setCss3dDOM(createDom('3D' + i), { x: 0, y: i * 2, z: 0 }).scale.multiplyScalar(0.02) // 3d dom
63. }
65. animate()
67. function animate() {
69.     requestAnimationFrame(animate)
71.     renderer.render(scene, camera)
73.     css3DRender.render(scene, camera) // Css3D渲染
75.     css2DRender.render(scene, camera) // Css2D渲染
77. }
79. window.onresize = () => {
81.     renderer.setSize(box.clientWidth, box.clientHeight)
83.     camera.aspect = box.clientWidth / box.clientHeight
85.     camera.updateProjectionMatrix()
87.     css3DRender.resize()
89.     css2DRender.resize()
91. }
95. // 创建dom
96. function createDom(text) {
98.     const div = document.createElement('div')
100.     const img = document.createElement('img')
102.     img.src = `https://threehub.cn/` + '/files/author/z2586300277.png'
104.     img.style.width = '50px'
106.     img.style.height = '50px'
108.     div.appendChild(img)
110.     div.innerHTML += text
112.     div.style.color = 'white'
114.     return div
116. }
118. /* css2d渲染 */
119. function setCss2DRenderer(DOM) {
121.     const css2DRender = new CSS2DRenderer()
123.     css2DRender.resize = () => {
125.         css2DRender.setSize(DOM.clientWidth, DOM.clientHeight)
127.         css2DRender.domElement.style.zIndex = 0
129.         css2DRender.domElement.style.position = 'relative'
131.         css2DRender.domElement.style.top = -DOM.clientHeight * 2 + 'px'
133.         css2DRender.domElement.style.height = DOM.clientHeight + 'px'
135.         css2DRender.domElement.style.width = DOM.clientWidth + 'px'
137.         css2DRender.domElement.style.pointerEvents = 'none'
139.     }
141.     css2DRender.resize()
143.     DOM.appendChild(css2DRender.domElement)
145.     return css2DRender
147. }
149. /* css3d 渲染 */
150. function setCss3DRenderer(DOM) {
152.     const css3DRender = new CSS3DRenderer()
154.     css3DRender.resize = () => {
156.         css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)
158.         css3DRender.domElement.style.zIndex = 0
160.         css3DRender.domElement.style.position = 'relative'
162.         css3DRender.domElement.style.top = -DOM.clientHeight + 'px'
164.         css3DRender.domElement.style.height = DOM.clientHeight + 'px'
166.         css3DRender.domElement.style.width = DOM.clientWidth + 'px'
168.         css3DRender.domElement.style.pointerEvents = 'none'
170.     }
172.     css3DRender.resize()
174.     DOM.appendChild(css3DRender.domElement)
176.     return css3DRender
178. }
180. /**
181. * 名称: CSS元素
182. * 作者: 优雅永不过时 https://github.com/z2586300277
183. */

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。