THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d

方法：css2d_label
特点：显示的标签大小固定，不会随窗口的大小而变化。
注意：

1.引入CSS2DRenderer.js
2.添加渲染器CSS2DRenderer
3.进行渲染CSS2DRenderer

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>three.js css2d - label</title><style>body {background-color: #000;margin: 0;overflow: hidden;}#info {position: absolute;top: 0px;width: 100%;color: #FFF;padding: 5px;font-family: Monospace;font-size: 13px;text-align: center;z-index: 1;}.label {color: #FFF;font-family: sans-serif;padding: 2px;background: rgba(0, 0, 0, .6);}a {color: #000000;}</style>
</head><body><div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div><script src="../js/three.js"></script><script src="../js/OrbitControls.js"></script><script src="../js/CSS2DRenderer.js"></script><script src="../js/stats.js"></script><script>var camera, scene, renderer, labelRenderer;var clock = new THREE.Clock();var textureLoader = new THREE.TextureLoader();var earth, moon;var diqiu = 12var yueliang = 11// init();// animate();start()// 渲染器function initThree() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x000000, 1.0);document.body.appendChild(renderer.domElement);labelRenderer = new THREE.CSS2DRenderer();labelRenderer.setSize(window.innerWidth, window.innerHeight);labelRenderer.domElement.style.position = 'absolute';labelRenderer.domElement.style.top = 0;document.body.appendChild(labelRenderer.domElement);}// 场景function initScene() {scene = new THREE.Scene();var axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);}// 相机function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);camera.position.set(10, 5, 20);}// 物体var EARTH_RADIUS;var MOON_RADIUS;function initObject() {EARTH_RADIUS = 1;MOON_RADIUS = 0.27;var earthGeometry = new THREE.SphereBufferGeometry(EARTH_RADIUS, 16, 16);var earthMaterial = new THREE.MeshPhongMaterial({specular: 0x333333,shininess: 5,map: textureLoader.load('../planets/earth_atmos_2048.jpg'),specularMap: textureLoader.load('../planets/earth_specular_2048.jpg'),normalMap: textureLoader.load('../planets/earth_normal_2048.jpg'),// map: textureLoader.load('../js/1.png'),// specularMap: textureLoader.load('../js/1.png'),// normalMap: textureLoader.load('../js/1.png'),normalScale: new THREE.Vector2(0.85, 0.85)});earth = new THREE.Mesh(earthGeometry, earthMaterial);scene.add(earth);var moonGeometry = new THREE.SphereBufferGeometry(MOON_RADIUS, 16, 16);var moonMaterial = new THREE.MeshPhongMaterial({shininess: 5,map: textureLoader.load('../planets/moon_1024.jpg')// map: textureLoader.load('../js/1.png')});moon = new THREE.Mesh(moonGeometry, moonMaterial);scene.add(moon);//调用标签函数label()}// 标签var earthLabelfunction label() {// 添加标签<div class='label'>diqiu</div>var earthDiv = document.createElement('div');earthDiv.className = 'label';earthDiv.textContent = diqiu;earthDiv.style.marginTop = '-1em';// var earthLabel = new THREE.CSS2DObject(earthDiv);earthLabel = new THREE.CSS2DObject(earthDiv);earthLabel.position.set(0, EARTH_RADIUS, 0);earth.add(earthLabel);var moonDiv = document.createElement('div');moonDiv.className = 'label';moonDiv.textContent = 'Moon';moonDiv.style.marginTop = '-1em';var moonLabel = new THREE.CSS2DObject(moonDiv);moonLabel.position.set(0, MOON_RADIUS, 0);moon.add(moonLabel);}// 灯光function initLight() {var dirLight = new THREE.DirectionalLight(0xffffff);dirLight.position.set(0, 0, 1);scene.add(dirLight);}// 开始渲染function initRender() {requestAnimationFrame(initRender);var elapsed = clock.getElapsedTime();moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed)*5);renderer.render(scene, camera);labelRenderer.render(scene, camera);}// 控制器function initControls() {var controls = new THREE.OrbitControls(camera);}// 性能监测function initStats() {var stats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);}// 网格function initGrid() {var helper = new THREE.GridHelper(20, 14);// helper.setColors(0x0000ff, 0x808080);scene.add(helper);}// 开始function start() {initThree();initScene();initCamera();initObject();initLight();initControls();initStats();initGrid();initRender();// setInterval(() => {//     diqiu = diqiu + 1;//  earth.remove(earthLabel);//     label()// }, 10)}function init() {// var EARTH_RADIUS = 1;// var MOON_RADIUS = 0.27;// camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// camera.position.set(10, 5, 20);// var controls = new THREE.OrbitControls(camera);// scene = new THREE.Scene();// var dirLight = new THREE.DirectionalLight(0xffffff);// dirLight.position.set(0, 0, 1);// scene.add(dirLight);// var axesHelper = new THREE.AxesHelper(5);// scene.add(axesHelper);// var earthGeometry = new THREE.SphereBufferGeometry(EARTH_RADIUS, 16, 16);// var earthMaterial = new THREE.MeshPhongMaterial({//  specular: 0x333333,//   shininess: 5,//     // map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),//  // specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),//   // normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),//   map: textureLoader.load('../js/1.png'),//     specularMap: textureLoader.load('../js/1.png'),//     normalMap: textureLoader.load('../js/1.png'),//   normalScale: new THREE.Vector2(0.85, 0.85)// });// earth = new THREE.Mesh(earthGeometry, earthMaterial);// scene.add(earth);// var moonGeometry = new THREE.SphereBufferGeometry(MOON_RADIUS, 16, 16);// var moonMaterial = new THREE.MeshPhongMaterial({//  shininess: 5,//     // map: textureLoader.load( 'textures/planets/moon_1024.jpg' )//  map: textureLoader.load('../js/1.png')// });// moon = new THREE.Mesh(moonGeometry, moonMaterial);// scene.add(moon);// var earthDiv = document.createElement('div');// earthDiv.className = 'label';// earthDiv.textContent = diqiu;// earthDiv.style.marginTop = '-1em';// var earthLabel = new THREE.CSS2DObject(earthDiv);// earthLabel.position.set(0, EARTH_RADIUS, 0);// earth.add(earthLabel);// var moonDiv = document.createElement('div');// moonDiv.className = 'label';// moonDiv.textContent = 'Moon';// moonDiv.style.marginTop = '-1em';// var moonLabel = new THREE.CSS2DObject(moonDiv);// moonLabel.position.set(0, MOON_RADIUS, 0);// moon.add(moonLabel);// //// renderer = new THREE.WebGLRenderer();// renderer.setPixelRatio(window.devicePixelRatio);// renderer.setSize(window.innerWidth, window.innerHeight);// document.body.appendChild(renderer.domElement);// labelRenderer = new THREE.CSS2DRenderer();// labelRenderer.setSize(window.innerWidth, window.innerHeight);// labelRenderer.domElement.style.position = 'absolute';// labelRenderer.domElement.style.top = 0;// document.body.appendChild(labelRenderer.domElement);}function animate() {// requestAnimationFrame(animate);// var elapsed = clock.getElapsedTime();// moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);// renderer.render(scene, camera);// labelRenderer.render(scene, camera);}</script>
</body></html>

THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d_label）相关推荐

THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...
Threejs实现标签，自定义样式显示标签
1,介绍使用threejs实现标签显示,这里只介绍如何实现显示标签功能,其他可查看往期文章. 效果图如下: 2,主要说明实现标签使用CSS2DRenderer(2D渲染器) 进行渲染. 1,引入渲 ...
HQChart使用教程2- 如何把自定义指标显示在K线图页面
如何把自定义指标显示在K线图页面自定义一个指标通过Option设置指标自定义一个带参数的指标让我们用上证指数来回测这个奇葩的BS指标吧 HQChart代码地址效果图自定义一个指标假设我们 ...
【思路分享】如何制作支持自定义样式的免费思维导图软件
[如何制作支持自定义样式的免费思维导图软件] 注:自定义样式中包括了可自由更换字体,因为要考虑到用免费可商用字体规避字体版权,很多思维导图在线编辑器的字体选项里面没有免费可商用字体的选项. 1.找支持 ...
matlab两个曲线的名称怎么显示出来的,求MATLAB的高手，怎么把两张仿真曲线合并显示在一张图上？...
求MATLAB的高手,怎么把两张仿真曲线合并显示在一张图上? 关注:194 答案:5 手机版解决时间 2021-02-10 14:48 提问者终究是陌生了 2021-02-09 16:38 程序 ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
select 标签自定义样式
需求原因:我在vue开发中,也会习惯使用各种UI库,但让人难受的是,提供的UI组件的样式难以覆盖,比如我要用的select,我的界面风格是深蓝色的,它的白色背景都不符合需求,要跑到element-pl ...
html展开显示样式,html a title 自定义样式显示
$(function() { // show try product title $(".tb7_try_box").find("a").each(functi ...

THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d_label）

THREEJS实现标签，自定义样式显示标签，在场景图上动态标识一些文字方法一（css2d_label）相关推荐

最新文章

热门文章