背景

公司的一个新项目要求做仿真，所以探寻了一番找到three.js来做，本来公司就是做gis相关业务的，所以迟早都要接触three.js。（来了公司还要求学习openlayer、cesium，唉感觉时间都不够用！）

好了，言归正传上干货，用three.js画一个简单的正方体。

正文

1.环境搭建 三种方式：

1）、直接cdn引入一个在线three.min.js,就可以开发了，但是不方便调试。

2）、npm下载一个，但是里面的文件可能不是很全，博主亲测。

3）、去three.js官网直接download一个项目(推荐这种，对于刚入门的开发者来说，官方文档很重要，很多api都要自己查看，并且在本地的运行速度，比在线的快多了，特别是某些例子)

然后要运行的话也很简单，node服务跑一个就行，或者vscode安装一个在线运行插件live server，顺便说一嘴，如果你不涉及到模型的相关操作其实直接本地打开网页就行，不然下载模型的时候file协议就挂了。

2.代码操作

1）、新建一个html页面，引入相关资源（我这里引入的es6语法的改写后的three.js,你也可以引入其他的版本，但是最好推荐使用新版本，至少代码方便调试，也方便遇到问题即使解决。）

import * as THREE from './build/three.module.js';

<div id="container"></div>

2）、接着实例化渲染器、场景、相机等。

var camera, scene, renderer,width,height;
var container = document.createElement( 'div' );
  document.getElementById('container').appendChild( container );
  renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
  renderer.setClearAlpha(0.2);      
  renderer.setClearColor( 0x000000, 0.0 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( width, height );
  container.appendChild( renderer.domElement );
  scene = new THREE.Scene();
  //载入相机
  camera = new THREE.PerspectiveCamera( 90, width / height, 1, 8000 );
  camera.position.set( 380, 50, 500 );
  scene.add( camera );
  //监听窗口变化更新视图渲染
  window.addEventListener( 'resize', onWindowResize, false );

这里setClearAlpha、setClearColor用来清除画布的背景的，设置之后背景透明，将显示body的背景颜色，大家可以自己试试，然后设置渲染窗口的分辨率以及宽高。

这里我采用的是透视投影相机，其实常用的也就是透视投影相机和正交投影相机(OrthographicCamera),相关的参数属性可以在官方文档上面查看，这里不说了，如果对这个相机搞不明白的同学，可以看一下官方的例子以及CameraHelper。

3）然后就是画图形

var material = new THREE.MeshPhongMaterial( { color: 0x0081cf } );
var geometry = new THREE.BoxBufferGeometry(100, 100 ,100);
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.set(375,50,225);
  scene.add(mesh);

BoxBufferGeometry为立方缓冲几何体，这里三个参数是长宽高，其他参数可以参考文档，mesh为网格,几何体是不能被渲染的，只有几何体和材质结合成网格才能被渲染到屏幕上,到这里我实际上以及画完了一个正方体。

4）将相机和场景加入渲染器里面，设置窗口变化的大小和分辨率，这里用到了requestAnimationFrame帧动画，这是定时器更好的一种动画机制，大家也可以去了解一下，以后会用到的。

function animate() {
  stopAnimation = requestAnimationFrame( animate );
  renderer.render( scene, camera );
}
function onWindowResize() {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height );
}
animate();

到这里也就成功的画出来了一个正方体

总结

今天介绍了一下简单的three.js使用，后面会继续分享three.js相关的知识，跟大家共同进步，这篇文章从年前写到了年后，中间耽搁了很久，这里也希望疫情早点过去，大家都可以快快乐乐的！

另外大家在学习three.js遇到什么问题的时候，可以自己先看看源码，很多东西你可以按照你自己的想法来定制，然后也可以去git上面给作者留言或者看看别人的提问有没有相同的。

好了我们下期再见！

THREE.js探索基础篇

背景

正文

总结