背景
公司的一个新项目要求做仿真,所以探寻了一番找到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上面给作者留言或者看看别人的提问有没有相同的。
好了我们下期再见!