云南龙网

  1. 首页 > 云知道 > >

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

云知道threejs


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


WebGL简介：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化 。
Three.js简介：Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成3D绘图的得力工具 。
three.js官方文档 ：threejs.org/
three.js中文文档 ：
https://techbrood.com/threejs/docs/
Three.js整体认知（附：Three.js功能概览）
一、threejs三大组件（场景-scene，相机-camera，渲染器-renderer）
场景（Scenes）
场景是所有物体的容器，场景只有一种 。
场景的构造函数是：
var scene = new THERR.Scene()复制代码Fog（线性雾）：
scene.fog = new THREE.Fog(0xcce0ff, 10, 500)复制代码照相机（Cameras）
定义了三维空间到二维屏幕的投影方式，投影方式主要分为正交投影和透视投影 。
1.正交投影：正交投影照相机获得的结果对于在三维空间内平行的线，投影到二维空间中也一定是平行的 。
2.透视投影：透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果 。
一般说来，对于制图、建模软件通常使用正交投影，这样不会因为投影而改变物体比例；而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果，以下详细介绍透视投影 。
透视投影照相机（Perspective Camera）的构造函数是：
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far)复制代码让我们通过一张透视照相机投影的图来了解这些参数 。
透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域，在该视景体以外的物体将不会被渲染 。
fov是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示 。
aspect等于width / height，是照相机水平方向和竖直方向长度的比值，通常设为Canvas的横纵比例 。
near照相机到视景体最近的距离，为正值 。
far照相机到视景体最远的距离，为正值 。
渲染器（Renderers）
渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来 。渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制 。three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是webGLRenderer渲染器 。webGLRenderer渲染器的构造函数是：
renderer = new THERR.WebGLRenderer()复制代码创建完渲染器之后，需要调用render方法将之前创建好的场景和相机相结合从而渲染出来，即调用渲染器的render方法：
renderer.render(scene,camera)复制代码了解了three.js完成3D绘图的三大要素之后，便可以在页面中创建场景，并利用相机将场景渲染到网页上 。
首先需要下载three.js库，并引用到自己的代码中，以下为三种引入方式，选择合适的方式在自己的项目中 。
//ES5const THREE=require（'three'）//CommonJS/AMDimport * as THREE from 'three'//ES6复制代码// 创建场景var scene = new THREE.Scene(); // 创建透视相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 创建一个 WebGL 渲染器var renderer = new THREE.WebGLRenderer({alpha: true,// 默认情况下为黑色场景，此处设置为透明（即白色场景）}); // 设置渲染器为全屏renderer.setSize(window.innerWidth, window.innerHeight); // 添加到网页中document.body.appendChild(renderer.domElement);复制代码

推荐阅读


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

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