THREE.js mesh 网格的使用和 camera 相机的使用

281 阅读1分钟

mesh 网格

position(位置)

决定该对象相对于其父元素的位置。

var meterial = new THREE.MeshLambertMaterial({color: 0x44ff44 })
var geom = new THREE.BoxGeometry(5,8,3)
var cube = new THREE.Mesh(geom, meterial)
cube.position.y = 4 // 设置其位置也可以使用cube.position.set(x,y,z)
scene.add(cube)  

rotation(旋转)

设置对象绕任何一个轴的旋转弧度

cube.rotation.x = 0

scale(比例)

设置沿着x,y,z 轴缩放对象

cube.scale.set(000);

translateX(amount)

沿着x轴平移指定的的距离

translateY(amount)

沿着x轴平移指定的的距离

translateX(amount)

沿着x轴平移指定的的距离

camera 相机

相机分为两种:正投影相机和透视相机, 透视相机:透视视图,也是最自然的视图 ,距离相机越远的方块,被渲 染得越小,符合人的视觉 正投影相机:,所有方块渲染出来的尺寸 样;对象和相机之间的距离不会影 响渲染结果。

PerspectiveCamera 透视相机

camera = new THREE.PerspectiveCamera(fov,aspect, near, far );
1. fov 视场,这是从相机的位置能够看到的部分场景,推荐值为:452.aspect 长宽比,渲染结果输出区的横向和纵向长度的比值,推荐值:window.innerWidth / window.innerHeight,
3.near 近面,从距离相机多近的地方开始渲染场景 推荐值:0.1
4.far 远面,相机可以从它所处的位置看多远,默认:1000

1662017764454.png

OrthographicCamera 正投影相机

camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
1.left 左边界,可渲染部分的左侧边
2.right 右边界,可渲染部分的右侧边
3.top 上边界,可渲染部分的最上边
4.bottom 下边界,
5.near 近面,基于相机所在的位置,从这一点开始渲染
6.far 远面,基于相机所在的位置,从这一点结束渲染

1662018852289.png

相机设置 position位置, lookAT() 聚焦点

camera.position.x = -20;
camera.position.y = 25;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(5, 0, 0));