three.js正投影相机OrthographicCamera
精选原创版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!-- https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正投影相机OrthographicCamera</title>
<style> body { margin: 0;
/* 隐藏body窗口区域滚动条 */
overflow: hidden; }
</style>
<!--引入three.js三维引擎-->
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 【第一步】: 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 【第二步】: 创建网格模型
*/
//创建一个球体几何对象
// var geometry = new THREE.SphereGeometry(60, 40, 40);
//创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(10, 10, 10);
// 【第三步】: 创建材质对象Material，这里只是单单的给复制颜色
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
for(var i=-9;i<10;i++) {
// 创建网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material);
// 设置模型位置 X 轴
mesh.position.set(i*20, 0, 10);
// 将网格模型添加到场景中
scene.add(mesh);
}
for(var i=-9;i<10;i++) {
// 网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material);
// 设置模型位置 Y 轴
mesh.position.set(0, i*20, 10);
// 将网格模型添加到场景中
scene.add(mesh);
}
for(var i=-9;i<10;i++) {
// 创建网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material);
// 设置模型位置 Z 轴
mesh.position.set(0, 0, i*20);
// 将网格模型添加到场景中
scene.add(mesh);
}
/**
* 【第四步】:光源设置
*/
// 4-1 创建点光源
var point = new THREE.PointLight(0xffffff);
// 点光源位置
point.position.set(400, 200, 300);
// 点光源添加到场景中
scene.add(point);
// 4-2 环境光
var ambient = new THREE.AmbientLight(0x444444);
// 将环境光添加到场景中
scene.add(ambient);
/**
* 【第五步】: 相机设置 及 创建相机对象
*/
// 创建正交投影相机对象
// https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera
// 设置窗口的宽度为浏览器窗口宽度
var width = window.innerWidth;
// 设置窗口的高度为浏览器窗口高度
var height = window.innerHeight;
// 正交投影相机OrthographicCamera参数为
var camera=new THREE.OrthographicCamera(
width/2, // left摄像机视锥体左侧面
-width/2, // right摄像机视锥体右侧面
height/2, // top摄像机视锥体上侧面
-height/2, // bottom摄像机视锥体下侧面
0.1, // near摄像机视锥体近端面
1000 // far摄像机视锥体远端面
);
// 设置相机位置
camera.position.set(0, 0, 200);
// 设置相机方向(指向的场景对象)
camera.lookAt(scene.position);
/**
* 【第六步】创建WebGL渲染器对象
*/
// antialias为true开启抗锯齿
var renderer = new THREE.WebGLRenderer({antialias:true});
// 设置渲染区域尺寸
renderer.setSize(width, height);
// 设置背景颜色
renderer.setClearColor(0xb9d3ff, 1);
// body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
/**
* 【第七步】创建轨道控制器，实现用鼠标交互 旋转、平移，缩放
* 关于OrbitControls轨道控制器的使用说明
* http://www.yanhuangxueyuan.com/doc/Three.js/OrbitControls.html
*/
var controlStore = new THREE.OrbitControls(
camera,
renderer.domElement
);
// 动态阻尼系数 就是鼠标拖拽旋转灵敏度
controlStore.dampingFactor = 0.5;
// 视角最小距离
controlStore.minDistance = 0;
// 视角最远距离
controlStore.maxDistance = 2000;
// 最大角度
controlStore.maxPolarAngle = Math.PI / 2.2;
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
//执行渲染操作 指定场景、相机作为参数
</script>
</body>
</html>