做股权众筹的网站,自己网站首页如何设置,贵港网站seo,个人网站怎么填写1. 前言
本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOMCSS的平面,使其可以作为一个物体添加到Threejs场景里
如下效果图:
2. 实现步骤
首先创建一个ThreejsVueVite的项目,作为本次的demo项目下载Threejs第三方库
yarn…1. 前言
本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOMCSS的平面,使其可以作为一个物体添加到Threejs场景里
如下效果图:
2. 实现步骤
首先创建一个ThreejsVueVite的项目,作为本次的demo项目下载Threejs第三方库
yarn add three
// 获
npm install three初始化Threejs场景
// 创建相机,场景,控制器,渲染器,灯光,辅助线等等...
!--* Author: wangzhiyu w19165802736163.com* version: 1.0.0* Date: 2024-03-14 15:44:26* LastEditTime: 2024-06-05 21:03:38* Descripttion: 在Threejs中加载CSS与HTML标签
--
template/templatescript setup
import { onMounted } from vue;
// 导入threejs
import * as THREE from three;
// 导入轨道控制器
import { OrbitControls } from three/addons/controls/OrbitControls.js;
// 初始化场景,相机,渲染器
const scene new THREE.Scene();
// THREE.PerspectiveCamera(摄像机垂直角度, 摄像机宽高比,摄像机近端面,摄像机远端面);
const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置摄像机的位置
camera.position.set(50, 50, 50);
// 渲染器
const renderer new THREE.WebGL1Renderer({ antialias: true });
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染颜色
renderer.setClearColor(#3F51B5);// 摄像机添加到场景中
scene.add(camera);// 创建轨道控制器
const controls new OrbitControls(camera, renderer.domElement);
// 开启阻尼效果
controls.enableDamping true;// 辅助线
const axesHelper new THREE.AxesHelper(50);
scene.add(axesHelper);// 渲染函数
function render() {// 更新渲染器renderer.render(scene, camera);// 更新轨道控制器controls.update();requestAnimationFrame(render);
}onMounted(() {render();document.getElementById(app).appendChild(renderer.domElement);// 窗口缩放处理window.addEventListener(resize, () {// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);// 更新相机宽高比camera.aspect window.innerWidth / window.innerHeight;// 更新相机投影矩阵camera.updateProjectionMatrix();// 设置渲染器像素比renderer.setPixelRatio(window.innerWidth / window.innerHeight);});
});
/scriptstyle langscss scoped/style在已有的Threejs场景中加入CSS2DObject与CSS2DRenderer方法,这两个方法一个可以将DOM转换为Threejs可使用的物体类型,可以添加到Threejs到场景中,另外一个是单独的渲染器,可以在Threejs场景中渲染CSS2DObject处理过的DOMCSS
// 引入Threejs设置DOMCSS的实例化方法
import { CSS2DObject, CSS2DRenderer } from three/examples/jsm/renderers/CSS2DRenderer;// 创建2D渲染器
const cssRenderer new CSS2DRenderer();
// 设置2D渲染器的尺寸
cssRenderer.setSize(window.innerWidth, window.innerHeight);
// 设置2D渲染器为绝对定位,并且在页面顶部
cssRenderer.domElement.style.position absolute;
cssRenderer.domElement.style.top 0;
// 设置2D渲染器可直接传统,操作Threejs场景
cssRenderer.domElement.style.pointerEvents none;
// 确保 CSS2DRenderer 使用的相机和 WebGLRenderer 使用的相机相同
cssRenderer.camera camera;// 添加一个HTMLCSS到Threejs场景中
function addDom() {// 创建一个DOM元素const div document.createElement(div);// 设置DOM元素的内容div.innerHTML 我是手动添加的html元素,放到Threejs场景里;// 设置div的样式div.style.color #fff;// 使用CSS2Object将dom转换为Threejs可操作的对象const divThree new CSS2DObject(div);// 设置转换为Threejs可以使用的结构后的物体的位置divThree.position.set(10, 10, 10);// 将处理后的对象添加到Threejs场景中scene.add(divThree);
}// 渲染函数
function render() {// ...// 渲染 CSS2D 场景cssRenderer.render(scene, camera);
}onMounted((){// ...// 2D渲染器挂载DOMdocument.getElementById(app).appendChild(cssRenderer.domElement);// 执行添加DOMCSS到场景中的方法,添加2D平面addDom();
})3. 关键流程
实现本demo的关键点就在于Threejs的CSS2Object与CSS2Render两个方法,第一个方法将DOMCSS转换为Threejs可加载的格式,第二个方法则可以在Threejs中渲染CSS2Object转换之后的格式
4. 总结
以上就是本篇文章的所有内容了,感谢您阅读到这里,有什么技术上的问题或者需要源码之类的,欢迎私信,我们下篇博客见
