极客观点
项目管理
HarmonyOS
最近刚开始研究three.js,了解到视景体就是下图中的大长方体
之前的代码是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="js/three.js"></script>
<script type="text/javascript">
// 定义一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
renderer.setClearColor(0x000000);
// 定义一个场景
var scene = new THREE.Scene();
// 定义一个相机
var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,1024);
camera.position.set(0,0,5);
scene.add(camera);
// 定义一个长方体,颜色设置为红色
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
new THREE.MeshBasicMaterial({
color:0xff0000,
wireframe:true
})
);
scene.add(cube);
// 渲染场景和照相机
renderer.render(scene,camera);
</script>
</body>
</html>效果是这样的:
现在把相机的参数进行修改为var camera = new THREE.OrthographicCamera(-1, 1, 1.5, -1.5, 1, 10);
结果是原来的正方体被水平方向被拉长了(如下图),而不是缩小,这是为什么?
