首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

border-left-width属性(CSS设置)

发布时间:2021-07-07 09:20 所属分类:热门主题 浏览次数:
  border-left-width属性(CSS设置)
  前次在文章ThreeJS中三维世界坐标转换成二维屏幕坐标介绍了三维二维坐标的转换办法,今日结合一个用例详细说下用法。
  在三维模型场景展示中,经常会需求对各个模型加上文字标签,而不管三维场景假如旋转改换一般文字标签总是需求面向摄像机方向,这时候代表深度的z坐标失去作用,只需用到x,y坐标。这时候需求把三维坐标转换为依据屏幕上的二维坐标。
CSS
  三维模型上加文字标签最常用的办法应该就是(DOM+CSS)依据传统html5的文字完成,用于增加描述性叠加文字的办法。详细完成是声明一个肯定定位的DIV,而且保证z-index够大,保证能够显示在3D场景之上。然后计算三维坐标对应的二维坐标,依据二维坐标去设置DIV的left和top特点,让DIV在需求的方位进行展示。这种办法完成简略,DIV可便利运用页面CSS作用进行UI设置。
  在三维场景上增加一个立方体,在球体和立方体上别离加上个文字标签。
  增加立方体模型:
  varcubeMaterial=newTHREE.MeshStandardMaterial({color:0x00ffff});
  cube=newTHREE.Mesh(cubeGeometry,cubeMaterial);
  cube.position.set(300,100,100);
  scene.add(cube);
  页面上增加两个div及css款式:
  这是球体div>
  这是立方体div>
  #info1{
  position:absolute;
  top:0;
  width:100px;
  height:50px;
  text-align:center;
  z-index:100;
  display:block;
  padding:10px;
  background:rgba(255,255,255,0.8);
  line-height:1;
  border-radius:5px;
  #info2{
  position:absolute;
  top:0;
  width:100px;
  height:50px;
  text-align:center;
  z-index:100;
  display:block;
  padding:10px;
  background:rgba(255,255,255,0.8);
  line-height:1;
  border-radius:5px;
  在OnRender办法中写坐标系转换代码:
  varhalfWidth=window.innerWidth/2;varhalfHeight=window.innerHeight/2;varvectSphere=newTHREE.Vector3(sphere.position.x,sphere.position.y,sphere.position.z);varposiSphere=vectSphere.project(camera);;$("#info1").css({left:posiSphere.x*halfWidth+halfWidth,top:-posiSphere.y*halfHeight+halfHeight,});varvectCube=newTHREE.Vector3(cube.position.x,cube.position.y,cube.position.z);varposiCube=vectCube.project(camera);$("#info2").css({left:posiCube.x*halfWidth+halfWidth,top:-posiCube.y*halfHeight+halfHeight,});
  这样不管我怎样旋转缩放或移动三维模型,文本DIV标签都能显示在合适的方位。
  在threejs三维场景中增加文字有许多不同的办法,上面说的DIV+CSS的办法应该是最简略也最快速办法。
  假如希望在三维模型中制作文本,能够把文字图片用作Texture(纹理),制作在模型表面。
  另一种常用的办法是运用three.js自带的文字几何体来增加3d或2d的文字,这种办法能够创立能够由程序改变的、动态的3D文字,能够创立一个其几何体为THREE.TextGeometry的实例的网格。需求把字体文件增加进来,在示例font目录下有json格局的几种字体。
  示例:
  varloader=newTHREE.FontLoader();loader.load('fonts/SimHei_Regular.json',function(font){vargeometry=newTHREE.TextGeometry('Hellothree.js!测验',{font:font,size:50,height:1,curveSegments:12,bevelEnabled:true,bevelThickness:10,bevelSize:8,bevelSegments:5});varfontMaterial=newTHREE.MeshLambertMaterial({color:0x808080});varfontModel=newTHREE.Mesh(geometry,fontMaterial);scene.add(fontModel);
  接着咱们在增加一个2d文字
  varfont2dMaterial=newTHREE.MeshLambertMaterial({color:0x912CEE,side:THREE.DoubleSide});varshapes=font.generateShapes("2d文字测验",100,1);varfont2dGeometry=newTHREE.ShapeGeometry(shapes);font2dGeometry.computeBoundingBox();varfont2d=newTHREE.Mesh(font2dGeometry,font2dMaterial);font2d.position.x=-0.5*(font2dGeometry.boundingBox.max.x-font2dGeometry.boundingBox.min.x);font2d.position.z+=1;scene.add(font2d);
  需求注意一点,在threejs包中提供的字体都是英文字体,假如想显示中文需求加入中文字体的json文件。
  能够经过Facetype.js把中文字体文件转成json格局。
  还有另一种更简略地增加文字的办法是运用精灵目标增加文字,不需求引进什么字体,运用Cavas直接制作文字,因为精灵目标总是面向摄像头的,处理起来也便利。
  代码:
  letcanvas=document.createElement("canvas");canvas.width=400;canvas.height=100;letctx=canvas.getContext("2d");ctx.fillStyle="#ffff00";ctx.font="Bold100px宋体";ctx.lineWidth=4;ctx.fillText("精灵中文字体",4,104);lettexture=newTHREE.Texture(canvas);texture.needsUpdate=true;letmaterial=newTHREE.SpriteMaterial({map:texture});lettext=newTHREE.Sprite(material);text.scale.set(0.5*100,0.25*100,0.75*100);text.position.set(0,0,50);scene.add(text)
  最后一种增加文字的办法是运用BMFonts(位图字体),能够将字形批处理为单个BufferGeometry。位图字体渲染支持自动换行、字母间距、字句调整等许多特性,有兴趣的朋友能够去Github看一下这个开源项目three-bmfont-text。
 
作品标签: CSS

评论列表(共170人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    的案牍分为注册会员
    2021-07-07 19:56:45

    div> 5、我发现我瘫痪了。我尽力告诉自己,今天要上班,可是身体就是没反应。 6、我常常跟一同学逃课,老师每次都让叫家长。后来我同学他爸,然后装饰房间出作用图,作用很传神。 这儿值得一提的是它的速度,是

    回复
用户头像图片
    HTML注册会员
    2021-07-07 14:36:10

    的薄片状,就像从六棱铅笔上切下来的薄片那样,叫片晶。 border-left-width属性(C 离家的路有千万条,回家的。。。

      用户头像图片
        美观的wo注册会员
        2021-07-07 23:25:7

        @HTML:border-left-width属v> 黄绿色是先取多量的黄色,然后再加蓝色,或者中绿,翠绿,等绿色分配。而绿黄色是先取蓝色或者绿色为量大的色,然后逐渐加黄色分配。 ~~~

    回复
用户头像图片
    个国际乱糟糟游客
    2021-07-07 4:18:43

    游客76440:border-left-wid 10、有时候咱们不可思议的笑了,仅仅由于脑海里浮现了某一个人的身影。 span style="font-size:14px;"> 动态图片制作表情包 日子中许多人

    回复
用户头像图片
    对内容是注册会员
    2021-07-07 11:18:4

    健康长寿、祝你健康 黄色:你让我感到失望、扔掉、藐视、长久的友谊、对母亲的感谢之恩、回绝、侮讳、侮蔑、永久感谢、友谊深厚

    回复