申请自助建站,媒体发稿推广,网站加ico,陕西省和城乡建设厅网站一.由于CSS3DRenderer 是附加组件#xff0c;必须显式导入
import { CSS3DRenderer, CSS3DObject } from three/examples/jsm/renderers/CSS3DRenderer.js;二.CSS3DRenderer特点
CSS3D不面向摄像机#xff0c;会跟随场景缩放#xff0c;不被模型遮挡#xff0c;通过DOM事…一.由于CSS3DRenderer 是附加组件必须显式导入
import { CSS3DRenderer, CSS3DObject } from three/examples/jsm/renderers/CSS3DRenderer.js;二.CSS3DRenderer特点
CSS3D不面向摄像机会跟随场景缩放不被模型遮挡通过DOM事件点击 但是由于项目要求label时刻面向摄像机因此需要在每次刷新更新lookat朝向可参考以下代码
function updateLabel(nodeName){// nodeName添加标签时记得赋予name属性const node scene.getObjectByName(nodeName);// 返回一个匹配该名字的子对象const cameraPosition camera.position.clone();node?.lookAt(cameraPosition);
}
// 循环渲染
function animate() {requestAnimationFrame(animate);renderer_3d.render(scene, camera);updateLabel(nodeName) // label朝向camera
}
animate()三.完整代码
从项目中抽出来的可能有缺漏欢迎大家补充
import * as THREE from three;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls
import { CSS3DRenderer, CSS3DObject } from three/examples/jsm/renderers/CSS3DRenderer.js;// 创建场景
const scene new THREE.Scene();// 创建CSS3DRenderer渲染器, 相机, 控制器
const renderer_3d new CSS3DRenderer();
renderer_3d.setSize(window.innerWidth, window.innerHeight);
renderer_3d.domElement.style.position absolute;
renderer_3d.domElement.style.top 0px;
//DOM添加renderer 我是使用umi写的containerRef.current是我的DOM容器(视个人项目情况而定)
containerRef.current.appendChild(renderer_3d.domElement); // 创建相机
const camera new new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1,1000);
camera.lookAt(0, 0, 0)
camera.updateProjectionMatrix(); // 创建控制器
const controls_3d new OrbitControls(camera, renderer_3d.domElement);
controls3.enableDamping true; // 是否有惯性
controls3.enableZoom true; // 是否可以缩放//添加标签文字
const tag create3DTag({ name: 教学楼 });//创建CSS3DObject标签元素
function create3DTag(obj) {const element document.createElement(div);element.className tag;element.innerText obj.name;const object new CSS3DObject(element);element.style.pointerEvents none;//避免HTML标签遮挡三维场景的鼠标事件object.nametag_3d // 注name不可缺object.visible true;object.scale.set(2,2,2);//缩放比例object.position.set(10, 20, 0);//指定摆放位置return object;
}// 更新CSS3D朝向
function updateLabel(nodeName){const node scene.getObjectByName(nodeName);// 返回一个匹配该名字的子对象const cameraPosition camera.position.clone();node?.lookAt(cameraPosition);
}// 循环渲染
function animate() {requestAnimationFrame(animate);renderer_3d.render(scene, camera);updateLabel(nodeName) // label朝向camera
}
animate()
