| Three.js camera中的position,lookAt,up三个属性的理解 | 您所在的位置：网站首页 › 相机中的scene › Three.js camera中的position,lookAt,up三个属性的理解 |
Three.js camera中的position,lookAt,up三个属性的理解
|
Three.js camera中的position,lookAt,up三个属性的理解
概述步骤
概述
主要针对相机中的position,lookAt,up三个属性来谈谈自己的理解。 position: 相机位置，默认为（0，0，0） lookAt：相机焦点方向，默认为Z轴负半轴方向, 大白话就是相机看向哪一个点 up：相机朝向，默认（0，1，0），可以理解为那一根坐标轴向上 步骤 引入透视相机，角度设置为45°， 引入辅助坐标轴 let camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ) scene.add(new THREE.AxesHelper(1000)) 因为相机的默认位置在（0， 0， 0）,所以必须调整相机的位置才可以看到 相机位置在（0， 0， 0）时是什么都看不到的，图解： 可以看到此时我们相机所拍到的地方没有任何内容，所以此时场景为空的。 接着我们创建一个box
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
此时我们再次进行刷新界面，可以看到界面还是空的，这是为什么呢，按常规理解来说我们的相机位置在（0， 0， 0）， box的位置也是在（0， 0， 0），大小为（10， 10， 10），我们相机的位置应该是处在box盒子的中间的，是可以看到box的，此时又有一个新概念，材质的渲染默认是渲染背面，我们看到的box盒子的是前面，是不会被渲染的，此时可以设置材质的side属性为THREE.DoubleSide， THREE.BackSide都可以看到。 移动相机的位置，使用camera.position.set() camera.position.set(0, 0, 30)
此时我们可以看到y轴设置为1， 那我们的y轴肯定是向上的。 此时我们设置x为1，那X轴的朝向就向上 camera.up.x = 1; camera.up.y = 0; camera.up.z = 0;
可以看到up方向和lookAt方向是平行且相反的，这种现象是不应该存在的，此时我得出一个结论，up方向和lookAt方向不能平行，不然会出现一些无法理解的情况产生。 lookAt 相机的焦点 此时我们将up的y轴甚至为朝上的 camera.up.x = 0; camera.up.y = 1; camera.up.z = 0;设置相机焦点 camera.lookAt(new THREE.Vector3(0, 10, 0));此时我们将相机看到y轴的10，效果 |
可以看到当相机移动到了(0, 0, 30)后，我们终于可以在相机的视野中看到整个box了，真开心~~~
此时我们在设置Z轴为1，我们预想的Z轴肯定也朝上了，这就和预期的结果有差距了
此时Z轴垂直我们的屏幕所以我们看不到，那这是怎么回事呢？？？ 按照我的理解是此时我们相机的焦点是看到负Z轴的，然后相机的朝向是在正Z轴的，图解 
【本文地址】
公司简介
联系我们