你好陌生人,请不要试图越过权限文章,谢谢!

Threejs学习之路——初识三要素、模型

Threejs

渲染三要素

  • 场景(scene)
  • 相机(OrthographicCamera)
  • 渲染器(Renderer)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//新建一个场景对象
var scene = new Scene();

//新建一个相机
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
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); //设置背景颜色


持续执行渲染器

  • requestAnimationFrame()
1
2
3
4
5
6
7
8
9
10
11
12
13
function render() {

let T1 = new Date();

let t = T1 - T0;
T0 = T1;
renderer.render(scene, camera);//执行渲染操作

mesh.rotateY(0.0005 * t);//每次绕y轴旋转0.01弧度
requestAnimationFrame(render);//请求再次执行渲染函数render

}
render();

控制场景

  • THREE.OrbitControls()
1
2
3
4
var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象

//
//controls.addEventListener('change', render);//监听鼠标、键盘事件

  addEventListtener方法如果在配合requestAnimationFrame()方法时,可省略,因为是监听事件,而requestAnimationFrame是不断请求,所以重复可省略

几个场景的多边形模型

  写这个的注意参数设定

1
2
3
4
5
6
7
8
9
10
11
12
//长方体 参数:长,宽,高
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 参数:半径60 经纬度细分数40,40
var geometry = new THREE.SphereGeometry(60, 40, 40);
// 圆柱 参数:圆柱面顶部、底部直径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);

材质设定

  • THREE.MeshLambertMaterial(color: 0x0000ff)

  这个一般是对生成的物体模型的材质进行定义

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

attribute(属性)

  • color 颜色
  • opacity 介于 0~1 透明度设定
  • transparent 是否开启透明度
  • wireframe 线框

高光效果,表示光照下的反射、漫反射、镜面反射等,都是光学原理,不懂,不常用,记一下

  • specular: 0x4488ee,
  • shininess: 12

辅助坐标

  • THREE.AxisHelper()
1
2
var axisHelper = new THREE.AxisHelper(350);
scene.add(axisHelper)

  添加进去即可