javascript贴图,如何用html代码贴图

ThreeJS简介

近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。 但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。

创新互联公司专注于海拉尔企业网站建设,响应式网站设计,成都商城网站开发。海拉尔网站建设公司,为海拉尔等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

OpenGL 它是最常用的跨平台图形库。

WebGL 是基于 OpenGL 设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而 Three.js 是通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。

简单点的说法 threejs=three + js ，three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。而javascript的计算能力因为google的V8引 擎得到了迅猛的增强，做3D程序，做服务器都没有问题。

WebGL 门槛相对较高，需要相对较多的数学知识（线性代数、解析几何）。因此，想要短时间上手 WebGL 还是挺有难度的。 Three.js 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失 WebGL 的灵活性。

因此，从 Three.js入 手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。

Three.js 的入门是相对简单的，但是当我们真的去学的时候，会发现一个很尴尬的问题：相关的学习资料很少。

通常这种流行的库都有很完善的文档，很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的，它的文档对初学者来说太过简明扼要。

不过官方提供了非常丰富的examples，几乎所有你需要的用法都在某个example中有所体现。但这些example不太适合用来入门，倒是适合入门之后的进一步学习。

这里推荐一些相对较好的教程：

当然，实际的学习过程中这些资料肯定是不太够的，遇到问题还是要自己去查资料。不过这里要提醒一下，Three.js的更新是相当频繁的，现在是r80版本，自2010年4月发布r1以来，这已经是第72个版本了(中间有的版本号跳过了)。因此，在网上找到的资料有些可能是不适合当前版本的，需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。

要在屏幕上展示3D图形，思路大体上都是这样的：

1、构建一个三维空间

Three中称之为场景(Scene)

2、选择一个观察点，并确定观察方向/角度等

Three中称之为相机(Camera)

3、在场景中添加供观察的物体

Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类

4、将观察到的场景渲染到屏幕上的指定区域

Three中使用Renderer完成这一工作

场景是所有物体的容器，也对应着我们创建的三维世界。

Camera是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置。 Three中使用采用常见的右手坐标系定位。

Three中的相机有两种，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

这里补充一个视景体的概念：视景体是一个几何体，只有视景体内的物体才会被我们看到，视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。

正交投影相机的视景体是一个长方体，OrthographicCamera的构造函数是这样的：

Camera本身可以看作是一个点，left则表示左平面在左右方向上与Camera的距离。另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。

可以近似地认为，视景体里的物体平行投影到近平面上，然后近平面上的图像被渲染到屏幕上。

2）透视投影相机

fov对应着图中的视角，是上下两面的夹角。aspect是近平面的宽高比。在加上近平面距离near，远平面距离far，就可以唯一确定这个视景体了。

透视投影相机很符合我们通常的看东西的感觉，因此大多数情况下我们都是用透视投影相机展示3D效果。

有了相机，总要看点什么吧？在场景中添加一些物体吧。

Three中供显示的物体有很多，它们都继承自Object3D类，这里我们主要看一下Mesh和Points两种。

1）Mesh

我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。

计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。

geometry是它的形状，material是它的材质。

不止是Mesh，创建很多物体都要用到这两个属性。下面我们来看看这两个重要的属性。

2）Geometry

Geometry，形状，相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。

Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状；

你也可以通过自己定义每个点的位置来构造形状；

对于比较复杂的形状，我们还可以通过外部的模型文件导入。

3）Material

Material，材质，这就没有形状那么直观了。

材质其实是物体表面除了形状以为所有可视属性的集合，例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。

这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。

材质上面已经提到了，它包括了贴图以及其它。

贴图其实是‘贴’和‘图’，它包括了图片和图片应当贴到什么位置。

纹理嘛，其实就是‘图’了。

Three提供了多种材质可供选择，能够自由地选择漫反射/镜面反射等材质。

4）Points

讲完了Mesh，我们来看看另一种Object——Points。

Points其实就是一堆点的集合，它在之前很长时间都被称为ParticleSystem(粒子系统)，r68版本时更名为PointCloud,r72版本时才更名为Points。更名主要是因为，Mr.doob认为，粒子系统应当是包括粒子和相关的物理特性的处理的一套完整体系，而Three中的Points简单得多。因此最终这个类被命名为Points。

5）Light

神说：要有光！

光影效果是让画面丰富的重要因素。

Three提供了包括环境光AmbientLight、点光源PointLight、 聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。

只要在场景中添加需要的光源就好了。

6）Renderer

在场景中建立了各种物体，也有了光，还有观察物体的相机，是时候把看到的东西渲染到屏幕上了。这就是Render做的事情了。

Renderer绑定一个canvas对象，并可以设置大小，默认背景颜色等属性。

调用Renderer的render函数，传入scene和camera，就可以把图像渲染到canvas中了。

现在，一个静态的画面已经可以得到了，怎么才能让它动起来？

很简单的想法，改变场景中object的位置啊角度啊各种属性，然后重新调用render函数渲染就好了。

那么重新渲染的时机怎么确定？

HTML5为我们提供了requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。

如果我们一开始这样渲染：

只需要改成这样：

object就可以动起来了！

下面我们用一个简单的例子来梳理一下这个过程。

首先写一个有Canvas元素的页面吧。

下面来做Javascript的部分

首先初始化Renderer

初始化场景:

初始化相机：

要唯一确定一个相机的位置与方向，position、up、lookAt三个属性是缺一不可的。

这里我们创建了一个正交投影相机，这里我将视景体大小与屏幕分辨率保持一致只是为了方便，这样坐标系中的一个单位长度就对应屏幕的一个像素了。

我们将相机放在Z轴上，面向坐标原点，相机的上方向为Y轴方向，注意up的方向和lookAt的方向必然是垂直的（类比自己的头就知道了）。

下面添加一个立方体到场景中：

注意我们使用了法向材质 MeshNormalMaterial ，这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。

在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。 最后来创建一个动画循环吧

每次重绘都让这个立方体转动一点点。 当页面加载好时，调用前面这些函数就好了。

WebGL中文网 强烈推荐!!

WebGL中文教程网

ThingJS官方示例（十一）：大数据矢量及贴图url开发OD线

#前端# #三维可视化# #OD线开发#

1. 基础图层创建

2. OD线创建（矢量与贴图）

3. 大数据量对接

简介：数字孪生体已经从制造领域逐步延伸拓展至城市空间，数字孪生城市又比工业制造复杂得多，与物理城市相对应。做不到100%逼真，而是构建统一的城市信息模型，让数字城市和现实城市进行“虚实结合”！3D城市动态模型包含点、线、面等地理要素，组合成信息化数字地图，有助于提升城市规划、建筑、交通、能源等领域的数字化水平。

Demo链接：

OD线 (Origin-Destination Line) 指的是起点和终点的连线，用于表示两点之间的某种关系，如航班线路、人口迁徙、交通流量、经济往来等。从本周起中国缓慢进入春运高峰期，堪称一次爆发式人口迁徙事件，春运迁徙地图通常使用OD线表示：

迁入来源地，OD线汇聚到一个方向，比如海口市，作为人口迁入的终点位置。

迁出目的地，OD线扩散到不同方向，但是起点是同一个位置，比如人口从哈尔滨市迁出。

GeoLine是带有地理位置的线要素，可以添加属性字段来存储其他信息，可以分为三种不同的线条类型，OD线不同在于限制了起点和终点，GIS里面就能够形成，绘制三维OD线需要哪些注意事项？创建OD线与其他线条有何区别？

这里详解OD线开发步骤，体验见demo：

动态加载地球组件之后，获取不同图层叠加，在ThingLayer业务图层进行更灵活的二次开发。创建一个ThingLayer图层，并将ThingLayer添加到底图中，获取起点的坐标位置startPos，展示由点及面的向外扩散效果。

var startPos = [116.39139175415039, 39.906082185995366];

ThingJS渲染器提供两种渲染类型，矢量渲染vector以及贴图渲染image；获取OD线先从ThingJS图层中查询迁徙路径，如北京-济南，接下来就这条路径做样式修改。

渲染器renderer设置Vector矢量线的颜色，示例显示rgb数组【255,0,0】的使用方法，还可以使用rgb字符串“rgb (255,0,0)”、十六进制字符串"#ff0000"。

流动效果速度默认为0，静止效果；数值可正可负，代表正反两种流动方向，贴图样式也同样适用。

renderer: {

lineType: 'Line',

type: 'vector', // 代表纯色渲染

color: [255, 0, 0],

// opacity:0.2 ,// 设置不透明度 默认是1

// speed: 1 ,// 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向

// effect: true // 线发光效果 默认为 false 不开启

}

});

获取url来生成贴图类型的OD线，颜色及其他样式是贴图本身所具备的，通过修改贴图通道叠加数numPass来扩充线宽度，一般来说该数值越大，线越亮。

利用effect函数开启线发光特效，在地图上起到重要的强调作用。

renderer: {

lineType: 'Line',

type: 'image', // 代表贴图渲染

imageUrl: '/guide/image/uGeo/path.png',

numPass: 3,

speed: 0.5, // 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向

// effect: true // 线发光效果 默认为 false 不开启

}

值得注意的是，大数据量的OD线一般需要浏览器端渲染至少几十万或上百万以上，不管数据传输还是数据渲染都需要采取更高效的方式—— ThingJS平台 提供生成动态大数据的接口，利用WebSocket（百万量级）， MQTT（单机千万级）数据接口实现流畅的双工通信，配合前端SDK轻松在线开发！

ThingJS提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。利用场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，与20万个开发者一同成为数字孪生技术创新者！

为什么three.js的贴图尺寸要符合2的幂次方

好像都是规定的吧，没有为什么。 就像上大学要考试一样，都是规定的。