html中frame添加文字,软件技术-WebVR-AFrame文字的实现

Three.js

Three.js是一款用于网页3D效果的框架，它可以在网页内实现非常炫酷的效果。

官方网站点此进入

Three.js官网包含了很多效果惊人的3D网站。

Aframe.js

Aframe.js是一款开源的网页3DVR技术解决方案，开源用html标记的方法快速搭建具有3DVR功能的网站页面。

快速上手Aframe.js

首先，需要引入script脚本(或者从文末下载到本地使用)：

然后需要在body中添加场景单元a-scene标记:

然后再向场景里面添加一个盒子a-box：

这时候预览页面，你需要用鼠标按住向下旋转视角，在下面就能看到一个红色矩形。

因为默认情况的摄像机是在原点人的高度位置(0，1.6，0)的。你可以添加一个摄像机a-camera标记，用position属性来移动它：

我们复制几个box，移动一下位置，也可以添加一个球体a-sphere：

默认情况会有一个照亮整个世界的环境光和一个来自左上方模拟太阳的灯光，我们可以手工添加一个灯光a-light，这时候默认两个灯光就会自动关闭：

这时候可能很难理解灯光和物体之间的关系，你可以按快捷ctrl+alt+i打开Aframe的监视器来查看，它看起来很像是一个三维软件的界面，左键按住拖拽旋转，右键按住拖拽移动，滚轮放缩。

我们添加一个灰色的天空a-sky，再给几何体添加一些材质material属性。

在这里opacity指透明，metalness指金属性质，影响高光强度和大小，blending表示混合模式，加亮或减暗，如果需要发光则要emissiveIntensity:100;emissive:red;联合使用。

Aframe.js中的文字

Aframe.js中的文字有三种实现形式：

3D立体文字。需要结合aframe-text-geometry-component.js然后在text-geometry属性设置使用，官方说明点这里

使用SDF图像文字格式，这也是默认的文字属性text即可实现。它是把可能用到的文字打包成一个图片，然后在3D里面拼接图片中的文字使用，可以参考这个示例文件。

实时元素图片文字。它是把网页div元素实时截图再放到3D场景里面，需要aframe-html-shader.js并在material属性中指定shader:html;target:#label-1;才能使用，这里的#target是指要转成图片的元素id。

下面是它的代码：

HourCode

color="pink">

material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="pink">

text-geometry="value:SHOW; font: #optimerBoldFont;height:0.1;size:0.2" color="#333333">

color="blue">

material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="blue">

text-geometry="value:TRAIN; font: #optimerBoldFont;height:0.1;size:0.2" color="#333333">

color="green">

material="opacity:0.3;side: double;metalness: 0.85;blending:additive" class="clickable" color="green">

text-geometry="value:LEARN; font: #optimerBoldFont;height:0.1;size:0.2">

表演台

训练场

学习营

material="shader:html;target:#label-1;transparent:true;ratio:height;fps:1;">

material="shader:html;target:#label-2;transparent:true;ratio:height;fps:1;side:double;">

material="shader:html;target:#label-3;transparent:true;ratio:height;fps:1;side:double;">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 20; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

animation="property: light.intensity; from: 0; to: 10; delay: 500; dur: 500" light="">

var tmr=setInterval(function(){

if (document.querySelector("canvas")){

setTimeout(()=>{

document.querySelector("#labels").style.display="block"

},1500)

clearInterval(tmr)

}

},100)

你可以访问页面链接http://syc.10knet.com/然后另存为本地页面，以此来获得全部相关的素材资源和js文件。

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

每个人的智能新时代

如果您发现文章错误，请不吝留言指正；

如果您觉得有用，请点喜欢；

如果您觉得很有用，欢迎转载~

END