Threejs加载DOM+CSS到场景中,实现3D场景展示2D平面的效果

1. 前言

本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOM+CSS的平面,使其可以作为一个物体添加到Threejs场景里
如下效果图:

2. 实现步骤

• 起首创建一个Threejs+Vue+Vite的项目,作为本次的demo项目
  
• 下载Threejs第三方库
  

1. yarn add three
2. // 获
3. npm install three

复制代码

• 初始化Threejs场景
  

1. // 创建相机,场景,控制器,渲染器,灯光,辅助线等等...
2. <!--
3. * @Author: wangzhiyu <w19165802736@163.com>
4. * @version: 1.0.0
5. * @Date: 2024-03-14 15:44:26
6. * @LastEditTime: 2024-06-05 21:03:38
7. * @Descripttion: 在Threejs中加载CSS与HTML标签
8. -->
9. <template></template>
11. <script setup>
12. import { onMounted } from 'vue';
13. // 导入threejs
14. import * as THREE from 'three';
15. // 导入轨道控制器
16. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
17. // 初始化场景,相机,渲染器
18. const scene = new THREE.Scene();
19. // THREE.PerspectiveCamera(摄像机垂直角度, 摄像机宽高比,摄像机近端面,摄像机远端面);
20. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
21. // 设置摄像机的位置
22. camera.position.set(50, 50, 50);
23. // 渲染器
24. const renderer = new THREE.WebGL1Renderer({ antialias: true });
25. // 设置渲染器尺寸
26. renderer.setSize(window.innerWidth, window.innerHeight);
27. // 渲染颜色
28. renderer.setClearColor('#3F51B5');
30. // 摄像机添加到场景中
31. scene.add(camera);
33. // 创建轨道控制器
34. const controls = new OrbitControls(camera, renderer.domElement);
35. // 开启阻尼效果
36. controls.enableDamping = true;
38. // 辅助线
39. const axesHelper = new THREE.AxesHelper(50);
40. scene.add(axesHelper);
42. // 渲染函数
43. function render() {
44.   // 更新渲染器
45.   renderer.render(scene, camera);
46.   // 更新轨道控制器
47.   controls.update();
48.   requestAnimationFrame(render);
49. }
51. onMounted(() => {
52.   render();
53.   document.getElementById('app').appendChild(renderer.domElement);
55.   // 窗口缩放处理
56.   window.addEventListener('resize', () => {
57.     // 设置渲染器尺寸
58.     renderer.setSize(window.innerWidth, window.innerHeight);
59.     // 更新相机宽高比
60.     camera.aspect = window.innerWidth / window.innerHeight;
61.     // 更新相机投影矩阵
62.     camera.updateProjectionMatrix();
63.     // 设置渲染器像素比
64.     renderer.setPixelRatio(window.innerWidth / window.innerHeight);
65.   });
66. });
67. </script>
69. <style lang="scss" scoped></style>

复制代码

• 在已有的Threejs场景中加入CSS2DObject与CSS2DRenderer方法,这两个方法一个可以将DOM转换为Threejs可使用的物体类型,可以添加到Threejs到场景中,另外一个是单独的渲染器,可以在Threejs场景中渲染CSS2DObject处理过的DOM+CSS
  

1. // 引入Threejs设置DOM+CSS的实例化方法
2. import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
4. // 创建2D渲染器
5. const cssRenderer = new CSS2DRenderer();
6. // 设置2D渲染器的尺寸
7. cssRenderer.setSize(window.innerWidth, window.innerHeight);
8. // 设置2D渲染器为绝对定位,并且在页面顶部
9. cssRenderer.domElement.style.position = 'absolute';
10. cssRenderer.domElement.style.top = '0';
11. // 设置2D渲染器可直接传统,操作Threejs场景
12. cssRenderer.domElement.style.pointerEvents = 'none';
13. // 确保 CSS2DRenderer 使用的相机和 WebGLRenderer 使用的相机相同
14. cssRenderer.camera = camera;
16. // 添加一个HTML+CSS到Threejs场景中
17. function addDom() {
18.   // 创建一个DOM元素
19.   const div = document.createElement('div');
20.   // 设置DOM元素的内容
21.   div.innerHTML = '我是手动添加的html元素,放到Threejs场景里';
22.   // 设置div的样式
23.   div.style.color = '#fff';
24.   // 使用CSS2Object将dom转换为Threejs可操作的对象
25.   const divThree = new CSS2DObject(div);
26.   // 设置转换为Threejs可以使用的结构后的物体的位置
27.   divThree.position.set(10, 10, 10);
28.   // 将处理后的对象添加到Threejs场景中
29.   scene.add(divThree);
30. }
32. // 渲染函数
33. function render() {
34.   // ...
35.   // 渲染 CSS2D 场景
36.   cssRenderer.render(scene, camera);
37. }
39. onMounted(()=>{
40.   // ...
41.   // 2D渲染器挂载DOM
42.   document.getElementById('app').appendChild(cssRenderer.domElement);
43.   // 执行添加DOM+CSS到场景中的方法,添加2D平面
44.   addDom();
45. })

复制代码

3. 关键流程

实现本demo的关键点就在于Threejs的CSS2Object与CSS2Render两个方法,第一个方法将DOM+CSS转换为Threejs可加载的格式,第二个方法则可以在Threejs中渲染CSS2Object转换之后的格式
4. 总结

以上就是本篇文章的所有内容了,感谢您阅读到这里,有什么技能上的标题或者需要源码之类的,欢迎私信,我们下篇博客见