一、HELLO WORLD
1.显示一个旋转的立方体
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
这个例子不过多解释了，只要熟悉三大件renderer.render(scene, camera);，然后将自己的物体add到scene即可。常见物体就是Mesh类型，需要提供geometry和material。
2.下载源码
官网源码中有许多例子：https://threejs.org/
下载后，用VSCODE打开three.js目录。创建.vscode文件夹下的launch.json文件：
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/demo/index.html",
"name": "启动 Chrome 并打开 localhost",
"userDataDir": "${workspaceRoot}/.userdata",
"runtimeArgs": [
"--allow-file-access-from-files",
"--allow-file-access-frome-files",
"--disable-web-security"
]
}
]
}
这里，我是在three.js目录下又创建了自己的文件夹demo，然后里面放入自己的index.html，内容就用上面的代码即可，当然也可以改改three.js的引入 方式：
<script src="../build/three.js"></script>
现在F5运行就可以打开index.html了。
3.VSCODE中增加threejs代码提示
npm install -g typings
npm install --save @types/three
再改造一下index.html:
<body>
<script src="../build/three.js"></script>
<script src="my.js"></script>
</body>
然后在demo文件夹下新建my.js，把之前的内容挪进去，继续编辑时就发现有代码提示了。
4.使用插件快速运行官方example
参考
vscode下的open in Browser VS open with live Server
VS Code修改Live Server插件改变默认5500端口号以及项目运行时在URL上添加项目名称
open in Browser会有跨域问题，直接装live Server，右键启动即可。
二、threejs学习资源
1.官方资源
官方API中文版 https://threejs.org/docs/index.html#manual/zh/introduction/
2.博客
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.mrguo.link/category 郭志强的博客
3.视频教程
刚接触Threejs，可以看郭隆邦的这个入门：
https://www.bilibili.com/video/BV14r4y1G7h4/
有一定基础的，建议直接看强哥学编程的示例解析：
https://www.bilibili.com/video/BV1p34y1J7Nc/
三、threejs相关
1.搭配pixi.js开发2D
creams-pixi 基于pixi.js封装的楼层剖面图组件
three.js做2d的ui很麻烦，绝大多数是three.js开发 3d, pixi.js开发2d
2.lil-gui
参考Three.js - 图形界面工具（lil-gui）（四）
https://github.com/georgealways/lil-gui/blob/master/Guide.md
https://lil-gui.georgealways.com/
- 为了能够快速地搭建three.js的交互UI，社区就出现了各种UI 库，其中lil-gui 是 three.js社区中非常流行的 UI 库。选择它是因为语法简单，上手快。
- 主要作用，获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。
- 使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。
3.cesium
做GIS相关
