Three.js的核心五步就是：
1.设置three.js渲染器
2.设置摄像机camera
3.设置场景scene
4.设置光源light
5.设置物体object
1.设置three.js渲染器
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。
(1) 声明全局render对象；
(2) 获取画布的高和宽；
(3) 生成渲染器对象
(4) 指定渲染器的高宽（一般跟画布框大小一致）；
(5) 追加canvas元素到body元素中；
(6) 设置渲染器的清除色。
/**
* 创建渲染器对象
*/
var renderer;
function initThree() {
renderer = new THREE.WebGLRenderer(); //生成渲染器对象，锯齿效果设置为有效
renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染器的高宽
renderer.setClearColor(0xFFFFFF, 1.0); //设置canvas背景色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
}
2.设置摄像机camera
OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在Three.js也能够指定透视投影和正投影两种方式的相机。
//设置相机
var camera;
function initCamera() {
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
}
3.设置场景scene
场景就是一个三维空间。 用Scene类声明一个对象。
/**
* 创建场景对象Scene
*/
var scene;
function initScene() {
scene = new THREE.Scene();
}
4.设置光源light
OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
(1) 声明全局变量(对象)
(2) 设置平行光源
(3) 设置光源向量
(4) 追加光源到场景
这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源。
//设置光源
var light;
function initLight(){
light = new THREE.DirectionalLight(0xff0000,1.0,0); //设置平行光源
light.position.set(200,200,200); //设置光源向量
scene.add(light); //追加光源到场景
}
5.设置物体object
function initObject() {
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000,
opacity: 1,
transparent: true
}); //材质对象Material
var mesh1 = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh1); //网格模型添加到场景中
}
下面是完整代码：
<script>
threeExcute()
function threeExcute() {
initScene();
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
initThree();
initCamera();
initLight();
initObject();
renderer.clear();
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener('change', render); //监听鼠标、键盘事件
}
/**
* 创建场景对象Scene
*/
var scene;
function initScene() {
scene = new THREE.Scene();
}
/**
* 创建渲染器对象
*/
var renderer;
function initThree() {
renderer = new THREE.WebGLRenderer(); //生成渲染器对象，锯齿效果设置为有效
renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染器的高宽
renderer.setClearColor(0xFFFFFF, 1.0); //设置canvas背景色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
}
//设置相机
var camera;
function initCamera() {
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
}
//执行渲染操作 指定场景、相机作为参数
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
}
/**
* 创建网格模型
*
*/
function initObject() {
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000,
opacity: 1,
transparent: true
}); //材质对象Material
var mesh1 = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh1); //网格模型添加到场景中
}
/**
* 光源设置
*/
function initLight() {
var light = new THREE.DirectionalLight(0xff0000, 1.0, 0); //设置平行光源
light.position.set(200, 200, 200); //设置光源向量
scene.add(light); //追加光源到场景
}
</script>
网友评论