HTML/CSS实现一个好看的UI效果

郭隆邦老师threejs教程学习笔记

在实际的项目中，一般需要UI设计出效果图，然后前端通过代码实现该设计效果，我们可以通过threejs代码去写，也可以通过canvas、SVG或普通HTML/CSS去写。下面是使用HTMl和CSS代码实现一个UI设计效果。

<!-- 模型标签UI界面 -->
<div id="tag" style="z-index: 1;position: absolute;width:500px;height:400px;color: #fff;">
  <div style="position:relative;">
    <div style="position: absolute;left: 0px;top: 0px;">
      <!-- 背景图片：中间区域颜色纯黑色，透明度设置为0.5-->
      <img src="./UI图/显示面板/2.png" alt="" style="width:400px;opacity: 1.0;">
    </div>
    <div style="position:absolute;left:25px;top:40px;font-size:16px">平房仓 P-6</div>
    <div style="position:absolute;left:290px;top:25px">
      <img src="./UI图/温度/2.png" alt="" style="width:50px;">
    </div>
    <div style="position:absolute;left:330px;top:40px">
      34.7 ℃</div>
    <div style="position:absolute;left:170px;top:50px">黄豆(吨)</div>
    <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
      <img src="./UI图/豆子/黄豆.png" alt="" style="width:60px;">
    </div>
    <div id="dun" style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
      5394 t</div>
    <div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">仓高—8 m</div>
    <div style="position:absolute;left:225px;top:170px;padding:8px 25px;">粮高—7.7 m</div>
  </div>
</div>

上面全部HTMl和CSS代码的基本结构。

<!-- 最外层div绝对定位 -->
<div id="tag" style="z-index: 1;position: absolute;width:500px;height:400px;color: #fff;">
  <!-- 第二层div相对定位 -->
  <div style="position:relative;">
    <!-- 里面div元素全部相对父元素绝对定位 -->
  </div>
</div>

坐标变化计算得到UI界面的屏幕坐标

const worldVector = new THREE.Vector3();
boxMesh.getWorldPosition(worldVector);
const standardVector = worldVector.project(camera);
const a = window.innerWidth / 2;
const b = window.innerHeight / 2;
// 计算HTMl模型标签屏幕坐标
const x = Math.round(standardVector.x * a + a);
const y = Math.round(-standardVector.y * b + b);
​
// 获得HTML元素创建的UI界面
const tag = document.getElementById('tag');
// 设置标签元素的位置
tag.style.left = x + 'px';
tag.style.top = y - 130 + 'px';

绑定数据——更新标签

通过HTML实现的模型标签，如果你想更新一些模型信息的数据是比较容易的，就和普通前端一样。

下面是通过原生JavaScript去更新模型标签部分数据，如果为了更方便开发你可以通过你自己比较熟悉的前端框架实现数据和视图的绑定更为方便，比如vuejs、react。

// 更新模型标签部分数据
const tag = document.getElementById('dun');
tag.innerHTML = 4999 + ' t'