云南龙网

  1. 首页 > 云知道 > >

threejs3d可视化楼宇源码 threejs文档示例( 二 )

云知道threejs

完成上述各个步骤之后，我们在网页上看到的只有一块静态的白色场景，看不到任何东西，接下来通过一些基础图像的学习和了解，以呈现一些图形效果 。
二、图像的表示
绘制的前期准备工作已经做完，接下来要做的就是把想要绘制的物体添加到场景中 。在计算机世界中，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角面片，无数个三角面片就能够组成各种各样形状的物体，通常把这种网格模型叫做Mesh模型 。Mesh模型是三维开发中使用的最为广泛的型 。
Geometries（几何图形）
【threejs3d可视化楼宇源码 threejs文档示例】three.js给出了很多方法去生成固定的网格形状，比如长方体（BoxGeometry）、球体（SphereGeometry）、圆形（CircleGeometry）等等 。还有根据具体坐标生成具体形状的方法，可以借助第三方建模软件（SketchUp）建模之后导入，目前支持的模型格式有.obj（最常用）,.dae，.ctm，.ply，.stl，.wrl，.vtk等 。Three.js有一系列支持外部导入文件的函数，是在three.js库之外的，使用前需要单独下载 。（例如：OrbitControls-控制器、OBJLoader-加载.obj 文件、MTLLoader-加载.mtl文件） 。
Materials（材质）
three.js给出了很多种直接生成材质的方法，其中比较常用的有MeshBasicMaterial（对光照无感，给几何体一种简单的颜色或显示线框），MeshLambertMaterial（对光照有反应，无光源则不会显示，用于创建暗淡的不发光的物体）、MeshPhongMaterial（对光照有反应，无光源不会显示，用于创建金属类米昂凉的物体）等等 。物体之所以能被人眼看见，一种是它自身的材料就能发光，不需要借助外界光源；另一种是自身材料不发光，需要反射环境中的光 。对于自身不发光的物体，需要个场景添加光源从而达到可视的效果 。
Lights（灯光）
three.js中可以创建出很多不同类型的光源，比如环境光AmbientLight（它的颜色会添加到整个场景和所有对象的当前颜色上），点光源PointLight（这种光源放出的光线来自同一点，且辐射方向四面八方，如蜡烛发出的光），方向光DirectionalLight（也称作无限光，从这种光源发出的光线可以看做是平行的，如太阳光），聚光灯SpotLight（这种光源的光线从一个椎体中射出，在被照射的物体上产生聚光的效果，如手电筒发出的光 。）有光源就缺少不了阴影，在Three.js中，能形成阴影的光源只有DirectionalLight和SpotLight；而相对地，能表现阴影效果的材质只有LambertMaterial和PhongMaterial 。three.js中渲染阴影的开销比较大，所以默认物体是没有阴影的，需要单独开启 。开启阴影的方法：

  • 将渲染器的shadowMapEnabled属性设置为true（告诉渲染器可以渲染隐形)
  • 将物体及光源的castShadow属性设置为true（告诉物体及光源可以透射阴影)
  • 将接收该阴影的物体的receiveShadow属性设置为true（告诉物体可以接收其他物体的阴影）
在了解了关于图形的基本知识之后，在上面的代码的基础上添加简单图像 。
var geometry = new THREE.BoxGeometry(1,1,1); // 创建一个长宽高都为1个单位的立方体var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建材质，对光照无感var cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格（mesh）,将材质包裹在立方体上scene.add(cube); // 将立方体网格添加到场景中camera.position.z = 5; // 指定相机位置function render() {requestAnimationFrame(render); // 让浏览器执行参数中的函数，不断循环（浏览器一个新的API）renderer.render(scene, camera); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景}render();复制代码

推荐阅读


上一篇：2022年即将上市的手机 一加手机发布会介绍

下一篇：端午节的真正由来 端午节的来源