Three 之 three.js (webgl)CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理
目录
处理 CSS2DRenderer 与 OrbitController 等轨道交互的冲突(导致失效)问题
一、简单介绍
Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。
本节介绍, three 开发网页 3D 场景, three.js (webgl)在 3D 场景中添加 文本按钮等的UI 方法,并且在添加中如何处理与OrbitController / html button 等交互冲突的处理,保证各自的功能正常使用,这里做简单使用说明整理,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。
CSS 2D渲染器(CSS 2D渲染器(CSS2DRenderer))
CSS2DRenderer是CSS3DRenderer(CSS 3D渲染器)的简化版本,唯一支持的变换是位移。
如果你希望将三维物体和基于HTML的标签相结合,则这一渲染器将十分有用。在这里,各个DOM元素也被包含到一个CSS2DObject实例中,并被添加到场景图中。CSS 2D渲染器(CSS2DRenderer) 方法:
.getSize () : Object
返回一个包含有渲染器宽和高的对象。
.render ( scene : Scene, camera : Camera ) : undefined
使用camera渲染scene。
.setSize (width : Number, height : Number) : undefined
将渲染器的尺寸调整为(width, height).
CSS 3D渲染器(CSS3DRenderer)
CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么这一渲染器十分有趣。 同时,它也可以将DOM元素与WebGL的内容相结合。
然而,这一渲染器也有一些十分重要的限制:
- 它不可能使用three.js中的材质系统。
- 同时也不可能使用几何体。
因此,CSS3DRenderer仅仅关注普通的DOM元素,这些元素被包含到了特殊的对象中(CSS3DObject或者CSS3DSprite),然后被加入到场景图中。
二、实现原理
在 Three js 3D 添加 CSS2D 的方法
1、创建 const xx = document.createElement('xxx'),对应设置
2、在以上基础上 const xxCSS2dObject = new CSS2DObject( xx ) ,并添加到 scene 中
3、然后记住创建 const css2DLabelRenderer = new CSS2DRenderer(),并且添加到 document.body.appendChild( this.css2DLabelRenderer.domElement )
4、在 render() 渲染函数中进行渲染 css2DLabelRenderer.render( this.scene, this.camera );
处理 CSS2DRenderer 与 OrbitController 等轨道交互的冲突(导致失效)问题
1、如果 CSS2DRenderer 没有需要交互的使用,可以直接设置 pointerEvents = 'none' (css2DLabelRenderer.domElement.style.pointerEvents = 'none';)
pointer-events:none —元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。
2、如果 CSS2DRenderer 有需要交互的使用,可以把 OrbitControls 控制器 用于事件监听的HTML元素替换(可以换成 CSS2DRenderer 这个)
// new OrbitControls( this.camera, this.renderer.domElement );
new OrbitControls( this.camera, this.css2DLabelRenderer.domElement );
如果 CSS2DRenderer 与 html button 等有交互冲突
1、可以设置该元素的 zIndex 值 大些,试试
style = "z-index: 1000" 或者 btnDiv.style.zIndex = 1000;
三、注意事项
1、CSS2DRenderer 渲染需要实时更新,必要也需要做窗口大小的变换,对应的事件处理
CSS2DLabelRender() {
if (this.css2DLabelRenderer != null) {
this.css2DLabelRenderer.render( this.scene, this.camera );
}
},
CSS2DLabelOnWindowSize() {
if (this.css2DLabelRenderer != null) {
this.css2DLabelRenderer.setSize(window.innerWidth, window.innerHeight);
}
四、效果预览
五、案例实现代码
效果预览基于,以下博文的基础环境实现:
Vue 之 Vue Cli 创建 Three js 工程( 网页 3D )的简单整理(一些注意事项)_仙魁XAN的博客-CSDN博客
1、关键代码(App.vue)
<template>
<div id="container"></div>
<div id="menu" style="position: absolute;left:45%;text-align: center; z-index: 1000">
<button @click="TestClick">TestClick(Click)</button>
</div>
</template>
<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
name: 'ThreeTest',
components: {},
data() {
return {}
},
mounted() {
this.container;
this.stats;
this.camera;
this.scene;
this.renderer;
this.css2DLabelRenderer;
this.init();
this.animate();
},
methods: {
init() {
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.addSceneCameraAndLight();
this.addObject();
this.initRenderer();
this.addStatus();
this.AddSceneTextCSS2DLabel();
this.initOrbitController();
// window.addEventListener
window.addEventListener('resize', this.onWindowResize);
},
addSceneCameraAndLight(){
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.set(0,20,20);
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
const light = new THREE.DirectionalLight(0xffffff, 1);
this.scene.add(this.camera);
this.scene.add(light);
},
initRenderer(){
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.container.appendChild(this.renderer.domElement);
},
addStatus(){
this.stats = new Stats();
this.container.appendChild(this.stats.dom);
},
// 添加测试物体,并设置他们的层为 0 1 2
addObject(){
const mesh = new THREE.Mesh(new THREE.BoxGeometry(10,10,10),
new THREE.MeshLambertMaterial({color:'#f00'}))
this.scene.add( mesh);
},
initOrbitController(){
// new OrbitControls( this.camera, this.renderer.domElement );
new OrbitControls( this.camera, this.css2DLabelRenderer.domElement );
},
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.CSS2DLabelOnWindowSize();
},
animate() {
requestAnimationFrame(this.animate);
this.render();
this.stats.update();
},
render() {
this.renderer.render(this.scene, this.camera);
this.CSS2DLabelRender();
},
AddSceneTextCSS2DLabel( ) {
this.css2DLabelRenderer = new CSS2DRenderer();
this.css2DLabelRenderer.setSize( window.innerWidth, window.innerHeight );
this.css2DLabelRenderer.domElement.style.position = 'absolute';
this.css2DLabelRenderer.domElement.style.top = '0px';//信息弹窗界面高度一半
this.css2DLabelRenderer.domElement.style.left = '0px';//信息弹窗界面宽度一半
//this.css2DLabelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild( this.css2DLabelRenderer.domElement );
const labelDiv = document.createElement( 'div' );
labelDiv.className = 'label';
labelDiv.identifierName = 'label';
labelDiv.textContent = 'CSS2D Label: Test ...';
labelDiv.style.marginTop = '-1em';
const css2dLabel = new CSS2DObject( labelDiv );
css2dLabel.position.set( 3, 3, 0 );
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
this.scene.add( css2dLabel );
const btnDiv = document.createElement( 'button' );
btnDiv.className = 'btn';
btnDiv.identifierName = 'btn';
btnDiv.textContent = 'Btn: Click ...';
btnDiv.style.marginTop = '-1em';
btnDiv.style.zIndex = 1000;
const css2dBtn = new CSS2DObject( btnDiv );
css2dLabel.position.set( 3, 0, 0 );
this.scene.add( css2dBtn );
},
CSS2DLabelRender() {
if (this.css2DLabelRenderer != null) {
this.css2DLabelRenderer.render( this.scene, this.camera );
}
},
CSS2DLabelOnWindowSize() {
if (this.css2DLabelRenderer != null) {
this.css2DLabelRenderer.setSize(window.innerWidth, window.innerHeight);
}
},
TestClick() {
console.log('Click...');
}
},
// beforeDestroy 废弃,使用 beforeUnmount
beforeUnmount() {
this.container = null;
this.stats = null;
this.camera = null;
this.scene = null;
this.renderer = null;
this.theta = null;
this.radius = null;
console.log("beforeUnmount");
}
}
</script>
<style>
#app {
text-align: center;
height: 100%;
}
* {
/*初始化样式*/
margin: 0;
padding: 0;
}
html {
/*用于 获取 屏幕的可视宽高*/
width: 100%;
height: 100%;
overflow: hidden;
}
</style>