前言:
学习threeJS完全是机缘巧合,记得有次客户提到我们系统(当时在职的公司产品)的数据总是以二维表的数据显示,略显枯燥乏味。所以那会我开始逐步摸索数据可视化(说白了就是网上找资料),了解到echarts,确实能然数据显示的更加漂亮。但是后面发现3D的echarts图形加载有点耗时,在查阅了很多资料后,关注点转移到了threeJS与thinkJS身上,但是当我得知thinkJS居然要收费,作为一个穷*,果断放弃。。。确定了涉猎threeJS,此次,主要和各位看官分享threeJS中的基础功能组成。
(.YZJGOOD原创文章,转载请注明出处)
正文:
threeJS模型页面展示主要构成:
场景(网格模型(具体实物+材质)+光照(点光源(阴影)+环境光源))+相机+渲染(鼠标缩放拖动之类的)
案例如下:
需要注意:引入关键js : three.js ; OrbitControls.js
/* 创建场景对象Scene*/
var scene = new THREE.Scene();
/*创建网格模型*/
var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x00ffff
});
//材质对象Material(MeshLambertMaterial确定了它的属性)
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh(将具体实物+材质添加进来)
scene.add(mesh); //网格模型添加到场景中
/* 光源设置 */
//点光源
var point = new THREE.PointLight(0x999999);//PointLight属性确定了它是点光源
point.position.set(400, 200, 300); //点光源位置(说白了就是这个光的起点)
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x888888);//AmbientLight属性确定了它是环境光源
scene.add(ambient);
/* 相机设置*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
/*创建相机对象*/
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置(相机从哪个方位照过去)
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/*创建渲染器对象*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//有时我们不一定要把canvas对象插入body下面,也有可能插入到某一元素下面
document.getElementById('models').appendChild(renderer.domElement); //models元素中插入canvas对象
/*鼠标拖拽控制*/
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建一个控制对象
controls.addEventListener('change', render);//监听鼠标事件,触发渲染函数,已达到拖拽旋转效果
//周期变化控制:
function render() {
renderer.render(scene, camera); //执行渲染操作
mesh.rotateY(0.1);//按照一定的周期每次绕y轴旋转0.1弧度
requestAnimationFrame(render);//请求再次执行渲染函数render,循环往复
}
render();
////创建一个控制对象,保障了鼠标能够进行拖拽设置
var controls = new THREE.OrbitControls(camera,renderer.domElement);
好的,这次的分享就到这里,谢谢!
(.YZJGOOD原创文章,转载请注明出处)