Three.js新手上路

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

随着物联网的发展，工业、建筑等各个领域与物联网相关Web项目网页交互界面都会呈现出3D化的趋势。Three.js是基于原生WebGL封装运行的三维引擎,WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。

几何体Geometry

//创建一个球体几何对象 参数：半径60  经纬度细分数40，40
var geometry = new THREE.SphereGeometry(60, 40, 40); 
//创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100); 
//圆柱  参数：圆柱面顶部、底部直径50，50  高度100 圆周分段数
var geometry = new THREE.CylinderGeometry(50,50,100,25);
//正八面体
var geometry = new THREE.OctahedronGeometry(50);
//正十二面体；
var geometry = new THREE.DodecahedronGeometry(50);
//正二十面体；
var geometry = new THREE.IcosahedronGeometry(50);

材质Material

var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

通过构造函数THREE.MeshLambertMaterial()创建了一个可以用于立方体的材质对象， 构造函数的参数是一个对象，对象包含了颜色、透明度等属性，本案例中只定义了颜色color

光源Light

//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

通过构造函数THREE.PointLight()创建了一个点光源对象，参数0xffffff定义的是光照强度

相机Camera

var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

通过构造函数THREE.OrthographicCamera()创建了一个正射投影相机对象,相机构造函数的的前四个参数定义的是拍照窗口大小,camera.position.set(200, 300, 200);和camera.lookAt(scene.position);定义的是相机的位置和拍照方向

渲染器Renderer

/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象