带你入门three.js——从0到1实现一个3d可视化地图_three.js二维图片三维化

前言

终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么

1. 对于three.js 这个框架有一个简单的理解，可以入门下。
2. 学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。
3. 我用一个简单的实例 带大家用three实现简单的可视化地球案例 。

3d框架的选择——three.js

1.为什么选择three.js

​ 官网对 「Threejs」 的介绍非常简单：“Javascript 3D library”。「openGL」 是一个跨平台3D/2D的绘图标准，「WebGL」 则是「openGL」 在浏览器上的一个实现。web前端开发人员可以直接用「WebGL」 接口进行编程，但 「WebGL」 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。「Threejs」 对 「WebGL」 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。总结来一句话： 就是你不懂计算机图形学，只要理解了three.js的一些基本概念你可以。

Threejs 的基本要素——场景

定义如下：

「场景」：是一个三维空间，所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。

用代码表示就是如下：

const scene = new THREE.Scene();
1

你就把他想象成一个房间，然后你可以往里面去添加一些物体，加一个正方体哈，加矩形，什么都可以。其实three.js 整个之间的关系是一个 「树形结构」。

Threejs 的基本要素——相机

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/118806