专栏首页郭先生的博客three.js 制作机房(下)

three.js 制作机房(下)

这一篇书接上文,说一说剩下的一些模块。

1. 机箱存储占用比率

机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色。我们就不多废话了。

2. 监控摄像视角

监控摄像相机我在强的四个角都放了一个,这里面我们引入了OBJ模型,模型是不带贴图的,因此需要自己慢慢设置,幸好这个模型不是很难,只有5个Mesh。如下图

捕获99999999.PNG

这个模型由于是斜的,所以图上的和它对角的能够很好的展示,另外两个交的角度就很奇怪了,不用担心,这里我们使用一个镜像的四维矩阵解决,对模型使用这个矩阵即可得到镜像的模型。

var m = new THREE.Matrix4();
var vec=new THREE.Vector3(0,0,1);
m.set( 1-2*vec.x*vec.x, -2*vec.x*vec.y, -2*vec.x*vec.z, 0,
    -2*vec.x*vec.y, 1-2*vec.y*vec.y, -2*vec.y*vec.z, 0,
    -2*vec.x*vec.z, -2*vec.y*vec.z, 1-2*vec.z*vec.z, 0,
    0, 0, 0, 1 );
object.applyMatrix4(m);

在网上下载的模型如果不带贴图,那么它默认应该是蓝色的材质,现在我们给他简单的设计一下颜色(在网格少的情况下)

object.children[0].material = new THREE.MeshPhongMaterial({color: 0x0D0D0D});
object.children[1].material = new THREE.MeshPhongMaterial({color: 0x717679});
object.children[2].material = new THREE.MeshPhongMaterial({color: 0x424242});
object.children[3].material = new THREE.MeshPhongMaterial({color: 0x626262});
object.children[4].material = new THREE.MeshPhongMaterial({color: 0x1B1B1B});

在监控的时候,我们不让控制器生效,这里控制器有一个属性controls.enabled = false即可。

好了监控就搞完了。

3. 红外防控报警

红外射线报警主要是对线的应用,封装一下其实就很简单了,怎么可能让它这么简单呢?我们在加一点点细节。

捕获12121212.PNG

在封装的方法中如何让红外发射器沿着线的方向放置呢?

var monitorArr = [
    [[44, 3, 27.5], [-44, 3, 27.5]], [[44, 6, 27.5], [-44, 6, 27.5]], [[44, 9, 27.5], [-44, 9, 27.5]], [[44, 12, 27.5], [-44, 12, 27.5]], [[44, 15, 27.5], [-44, 15, 27.5]], [[44, 18, 27.5], [-44, 18, 27.5]],
    [[44, 3, -27.5], [-44, 3, -27.5]], [[44, 6, -27.5], [-44, 6, -27.5]], [[44, 9, -27.5], [-44, 9, -27.5]], [[44, 12, -27.5], [-44, 12, -27.5]], [[44, 15, -27.5], [-44, 15, -27.5]], [[44, 18, -27.5], [-44, 18, -27.5]],
    [[42.5, 3, 29], [42.5, 3, -29]], [[42.5, 6, 29], [42.5, 6, -29]], [[42.5, 9, 29], [42.5, 9, -29]], [[42.5, 12, 29], [42.5, 12, -29]], [[42.5, 15, 29], [42.5, 15, -29]], [[42.5, 18, 29], [42.5, 18, -29]],
    [[-42.5, 3, 29], [-42.5, 3, -29]], [[-42.5, 6, 29], [-42.5, 6, -29]], [[-42.5, 9, 29], [-42.5, 9, -29]], [[-42.5, 12, 29], [-42.5, 12, -29]], [[-42.5, 15, 29], [-42.5, 15, -29]], [[-42.5, 18, 29], [-42.5, 18, -29]]
];

createLine(arr) {
    arr.forEach(d => {
        let v0 = new THREE.Vector3(...d[0]);
        let v1 = new THREE.Vector3(...d[1]);
        let vs = v1.clone().sub(v0).normalize();
        let ve = v0.clone().sub(v1).normalize();
        let standV = new THREE.Vector3(0,1,0);

        let quaternion1 = new THREE.Quaternion().setFromUnitVectors(standV, vs);
        let quaternion2 = new THREE.Quaternion().setFromUnitVectors(standV, ve);
        let cylineMesh1 = cylineMesh.clone();
        let cylineMesh2 = cylineMesh.clone();
        cylineMesh1.position.set(...d[0]);
        cylineMesh2.position.set(...d[1]);
        cylineMesh1.applyQuaternion(quaternion1);
        cylineMesh2.applyQuaternion(quaternion2);

        let lineGeom = new THREE.Geometry();
        lineGeom.vertices.push(new THREE.Vector3(...d[0]), new THREE.Vector3(...d[1]));
        let line = new THREE.Line( lineGeom, lineMate );
    })
}

数据是一个数组,每两个点坐标放在一个数组作为一个线的两个端点,代码中v0,v1既为两个Vectro3,vs是v0到v1的单位向量,ve相反,standV是沿y轴的单位向量。这里我们设置一个四元数quaternion1,它表示的旋转既是从standV到vs(或者ve)的旋转,我们将这个选转应用到新建的发射器上,将v0(或者v1)应用到它的position属性上即可。

4. 弱电线的铺设。

弱电线的铺设我仍然选用了线,这里我用了三种颜色的线,先看一下细节

捕获1131313.PNG

还是比较到位的,这里主要靠数组的创建,也就不多说了。

5. 风向

如果是简单来做,我们可以使用PlaneGeometry来做,加一些平移旋转,透明度,双面材质,纹理重复等等,但是这里为了让风有一点感觉,我们考虑使用着色器材质。不过这里我发现,在使用着色器材质后,纹理的repeat将不再起作用,但是已经使用了着色器材质,那么uv的事情都不算事情,

捕获15151515.PNG

var windMate = new THREE.ShaderMaterial({
    uniforms: { texture: { value: windT } },
    transparent: true,
    side: THREE.DoubleSide,
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = vec2(uv.x, uv.y * 3.0);
            vec3 newPosition = vec3(position.x, position.y, pow((position.y) / 5.0, 2.0) / 4.0);
            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
        }
    `,
    fragmentShader: `
        varying vec2 vUv;
        uniform sampler2D texture;
        void main() {
            gl_FragColor = texture2D( texture, vUv );
        }
    `
});

这里我们使用幂函数既position的z值pow((position.y) / 5.0, 2.0) / 4.0。当然了只要觉得好看就可以。

这个机房的就告一段落,后面还有更好的内容等待着大家的关注。

转载请注明地址:郭先生的博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 制作机房(上)

    three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈。吐槽完毕回归正题。前几天郭先生...

    郭先生的博客
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    宜信技术学院
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    用户7118204
  • three.js 制作逻辑转体游戏(下)

    上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判...

    郭先生的博客
  • Three.js 前言

     -----------------------------------本文非技术文章,着急开发的小伙伴请绕道-------------------------...

    朱格利斯
  • 【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果

    透视相机模拟的效果与人眼看到的景象最接近,在3D场景中也使用得最普遍,这种相机最大的特点就是近大远小,同样大小的物体离相机近的在画面上显得大,离相机远的物体在画...

    一个会写诗的程序员
  • three.js 制作魔方

    因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一...

    郭先生的博客
  • 懂技术又懂艺术的creative developer | Mix群聊

    条漫的灵感,来源于谷歌的storyboard生成技术,将任何图像集(如视频剪辑或相册)转换为故事板。通过互动的方式完成内容创作,这样用户就可以探索并找到最适合他...

    mixlab
  • 这次来实现VR全景看房,三种前端实现方案

    事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信...

    秋风的笔记
  • 三种前端实现VR全景看房的方案!说不定哪天就用得上!

    事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信...

    coder_koala
  • 基于WebGL无插件虚拟场景漫游关键技术(完整版)ThingJS

    如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3DSMAX、three.js等软件技术,学习门槛较高;ThingJS可视化组件更加轻量化,B/S架构下...

    森友鹿锘
  • 你的登录界面不够花里胡哨,3D 版本的来了

    今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫?

    程序IT圈
  • 说下three.js 中的相机

    所有的3D编程中都有一个避免不了的话题就是相机,相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投...

    程序你好
  • three.js 新手指南

    在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者...

    疯狂的技术宅
  • 提示

    在THREEjs中,渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。渲染出一个3d世界后,可以往里面增加各种各...

    lhyt
  • 十分钟快速实战Three.js

    本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解,会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.j...

    Vam的金豆之路
  • Three.js入门

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。Th...

    李海彬
  • 基于WebGL的3D可视化告警系统关键技术解析 ThingJS

    WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API,无需加装插件,只需编写网页代码即可实现3D图形的展示。WebGL技术相较于传统的We...

    森友鹿锘
  • 解剖 WebGL & Three.js 工作原理

    本文主要通过两方面来解剖 WebGL & Three.js :WebGL背后的工作原理和以Three.js为例,讲述框架在背后扮演什么样的角色,希望对大家学习有...

    万技师

扫码关注云+社区

领取腾讯云代金券