大佬教程收集整理的这篇文章主要介绍了Three.js学习之正交投影照相机,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Three.js是一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器,调试建议使用Chrome或者Firefox。
图形学中的照相机定义了三维空间到二维屏幕的投影方式。
针对投影方式照相机分为正交投影照相机和透视投影照相机。
正交投影:
透视投影:
正交投影就像数学课上画的;而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小。
对于制图、建模软件通常使用正交投影;而对于其他大多数应用,通常使用透视投影。
正交投影照相机的构造函数:
六个参数分别代表正交投影照相机拍摄到的六个面的位置。
其中,
若要保持照相机的横纵比例
由图可见near与far的值应为正值,且
源码:
<meta charset="UTF-8">
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene();
// 设置照相机
var camera = new THREE.orthographicCamera(-2,2,1.5,-1.5,1,10);
camera.position.set(0,5);
//camera.lookAt(new THREE.Vector3(0,0));
scene.add(camera);
// 创建立方体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1),new THREE.MeshBasicMaterial({
color: 0xff0000,wireframe: true
})
);
scene.add(cubE);
// render
renderer.render(scene,camera);
}
</script>