使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测

前言

这一篇带大家认识,认识什么是Three.js。Three.js 是一个能让WebGL在浏览器运行且有3D效果的JS库,也可以说是一个3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象
webgl是一项用来在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之进行交互的技术。

整体实现效果

使用Three.js创建校园楼盘模型,物联网温度安全监测

哈哈,是不是非常有点意思呢?给大家看看,我是怎么仿出这样子的,给大家看一眼原图。

创建天空之盒

逼真多少,咱就不说了。首先这个氛围咱得出来。天空!使用three.js创建一个天空之盒出来。把整个空间,当做一个立体的正方体,每一位面都由图片进行填充,之后再进行渲染。也就是说,整个学校都在这个盒子内。
使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测_第1张图片

首先使用new THREE.Mesh 创建出来一个立体。THREE.BoxGeometry 就如英文描述一样 箱式几何形状,三个参数为:10000。可想而知,这就是长、宽、高了。最后一个参数,就是纹理了。

  // 创建一个场景,将我们所有的元素,如物体,相机和灯光。
            scene = new THREE.Scene();
                //    创建天空之盒
            var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
            scene.add(skybox);

创建天空之盒最重要的一步

 //天空之盒
        function createCubeMap() {
            //获取立体位面图文件夹
            var path = "../assets/textures/cubemap/parliament/";
            var format = '.png';   //图像后缀
            //生成图像地址数组
            var urls = [
                path + 'px' + format, path + 'nx' + format,
                path + 'py' + format, path + 'ny' + format,
                path + 'pz' + format, path + 'nz' + format
            ];
           //将6个位面合并起来(加载纹理CUBE)
            var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
            return textureCube;
        }

类似于这种图片似的
使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测_第2张图片

天空之盒

          //createCubeMap()  就是上面创建位图的函数
           var textureCube = createCubeMap();
            textureCube.format = THREE.RGBFormat;

            var shader = THREE.ShaderLib["cube"];
            shader.uniforms["tCube"].value = textureCube;
            var material = new THREE.ShaderMaterial({
                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                depthWrite: false,
                side: THREE.DoubleSide
            });
            //    创建天空之盒
            var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
            scene.add(skybox);
            //  环境样式
            envMaterial = new THREE.MeshBasicMaterial({ opacity: 0.5, transparent: true, envMap: textureCube, side: THREE.DoubleSide });
            // 把摄像机对准场景的中心
            camera.position.x = 0;
            camera.position.y = 400;
            camera.position.z = 2100;
            camera.lookAt(scene.position);

创建地平面

地平面的话,也就是,首先我们去找一张纹理图,然后使用new THREE.BoxGeometry 创建一个地平面,参数如上所讲是长宽高。接下来咱们就该生成纹理图了, THREE.ImageUtils.loadTexture(“路劲”);地平面=形状+纹理图。最后设置地平面所处在,天空之盒中的位置,也就是说坐标。

 function CreatePanl() {
            var floor_1 = THREE.ImageUtils.loadTexture("../image/plant/greenplane_2.jpg");
            floor_1.wrapS = THREE.RepeatWrapping;
            floor_1.wrapT = THREE.RepeatWrapping;
            floor_1.repeat.set(4, 4);
            var floor_1Material = new THREE.MeshLambertMaterial({ map: floor_1 });
            var planeGeometry = new THREE.BoxGeometry(5000, 1000, 1, 1);
            planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 200 });
            var plane = new THREE.Mesh(planeGeometry, floor_1Material);
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 1200;
            scene.add(plane);
        }

地平面的纹理图可以是这样的!
使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测_第3张图片

其中:
(1)plane.receiveShadow :是否接受阴影。当光照在建立在地面的物体时是否接受(显示)阴影。
(2)plane.rotation.x : x轴旋转,调整x轴位置。
(3)plane.position.x :x轴坐标。与焦点(相机中心点)的距离。
(4)plane.position.y: y轴坐标。与焦点(相机中心点)的距离。
(5) THREE.RepeatWrapping 当物体很大的时候,将纹理图重复填充。

创建树,花,等植物

创建树,花的话,咱们可以使用 new THREE.Sprite()精灵模型对象。Sprite叫精灵,计算机图形学中,精灵指包含于场景中的二维图像或动画(wiki)。在threejs中,可以使用Sprite加载图像纹理,当然也包括用canvas创建的纹理,因此,canvas能创建什么图像,Sprite就能创建什么形状。简单来说,Sprite 能将2D图像渲染成3D的效果,所以我在这个项目中所用到的树等植物就是使用Sprite 创建的。为什么呢?Sprite是一个永远面向相机的平面。详细了解地址 Three.js精灵模型Sprite模拟树林效果

  //创建树的公用方法
        function CreateMinTree(width, height, x, y, z, path, rote) {
            var textureTree = THREE.ImageUtils.loadTexture("../image/plant/" + path);
            // 批量创建表示一个树的精灵模型
            var spriteMaterial = new THREE.SpriteMaterial({
                rotation: Math.PI / rote,
                map: textureTree,//设置精灵纹理贴图
            });
            // 创建精灵模型对象
            var sprite = new THREE.Sprite(spriteMaterial);
            // 控制精灵大小,
            sprite.scale.set(width, height, 1);
            sprite.position.set(x, y, z);
            return sprite;
        }

这个方法是我封装好了的,只要传宽、高,x轴、y轴、z轴、纹理路径、旋转角度的参数就好了。要想变树林,或者成堆显示,只要循环就好了。
最后sprite他是不接受阴影的。 sprite.castShadow = true;这样设置是无效的。

树纹理图

使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测_第4张图片

当然大家要是需要创建一个真正三维的树模型,大家可以了解一下这个Three.js创建三维树模型

创建楼模型思路

其实我偷懒了,这些楼全是实心的,也就是说,全是很多,很多的实体形状与纹理图组合起来的。刚刚有讲到 new THREE.Mesh 可以实例出来一个形状像——圆形(CircleGeometry)、柱体(CylinderGeometry)、球体(SphereGeometry)、文字(TextGeometry)等等。大家可以了解这位大哥的所讲的Three.js几何体。
像教学楼,或是其他楼,我就是先慢慢的做出一栋楼,然后循环。改变每一栋楼的坐标位置。哈哈哈,不简单啊,一栋楼里面,要实例窗户、空调、圆柱、砖块等的实体和纹理。这里都可以使用循环来生成楼模型。
所以啊我建议大家,封装好一个通用的方法,因为我们会大量的重复实例出实体对象,几个不同的参数,也就是形状长、宽、高、深度等和坐标x、y、z轴等。
当然并不是说只有代码生成模型,自己可以使用3D绘制工具去绘制,three.js允许导入不同格式的3d模型。

这个项目基本的介绍就分享在这里吧,也差不多了,要实现成啥样还得自己去琢磨。我就是依着一张原图就开始傻头傻脑的开发。

学习资料

唉,这篇我并没有详细地去介绍咋样去创建 渲染器,灯光,相机。因为这步骤的话需要引入很多相关three.js 的js组件。所以前面的介绍,除了功能的介绍之外是想着给大家一个学习的资料。里面有关于一些Three.js创建基本几何形状,和天空之盒等示例代码,以及相关three.js的组件js库。放心,是免费的不要大家的钱。
地址:https://pan.baidu.com/s/1-EdqT4v9X5EhtkjbGyANMQ
提取码:xgtx
二维码获取:
使用Three.js实现3D楼盘展示,创建天空之盒实现真实的环境氛围,在Three.js中添加树,花等植物。 仿学校3D楼盘模型,结合物联网实现安全监测_第5张图片

你可能感兴趣的:(自研项目,three.js,物联网,3d渲染,webgl,前端)