Array Cube and Camera Adaptation Experience

In this lesson, we will further experience the projection law of the perspective projection camera by arraying a cube.

for loop to create a list of models

const geometry = new THREE.BoxGeometry(100, 100, 100);
//材质对象Material
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, //设置材质颜色
    transparent: true,//开启透明
    opacity: 0.5,//设置透明度
});
for (let i = 0; i < 10; i++) {
    const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    // 沿着x轴分布
    mesh.position.set(i*200,0,0);
    scene.add(mesh); //网格模型添加到场景中
}

Double layer for loop to create array model

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);
//材质对象Material
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, //设置材质颜色
    transparent: true,//开启透明
    opacity: 0.5,//设置透明度
});
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        // 在XOZ平面上分布
        mesh.position.set(i * 200, 0, j * 200);
        scene.add(mesh); //网格模型添加到场景中  
    }
}

The camera position is zoomed out, and a larger observation range can be seen

const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// camera.position.set(292, 223, 185);
//在原来相机位置基础上拉远，可以观察到更大的范围
 camera.position.set(800, 800, 800);
 camera.lookAt(0, 0, 0);

Anything beyond the scope of the frustum far clipping interface will be clipped

// const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000);
// camera.position.set(292, 223, 185);
// 超出视锥体远裁界面的范围的会被剪裁掉，不渲染  可以调整far参数适配
camera.position.set(2000, 2000, 2000);
camera.lookAt(0, 0, 0);

Change camera observation target

// const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000);
camera.position.set(2000, 2000, 2000);
// camera.lookAt(0, 0, 0);
// 改变相机观察目标点
camera.lookAt(1000, 0, 1000);

Note that the camera control OrbitControls will affect the lookAt setting, and pay attention to manually setting the target parameters of OrbitControls

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
// console.log('controls.target', controls.target);
controls.target.set(1000, 0, 1000);
controls.update();//update()函数内会执行camera.lookAt(controls.targe)

Far small near large projection law

The projection law of the perspective projection camera is that the distance is small and the near is large. By observing the size change of the array cube through the camera, it can be seen that the farther away from the camera, the smaller the rendering visual effect of the cube.

fov change

Increase the camera angle of view fov, and the frustum range is larger, which means that you can see a larger rendering range, and the visual effect of far and near is more obvious.

3D Modeling Learning Studio

Previous: Three.js Tutorial: stats Performance Monitor (mvrlink.com)

Next: Three.js Tutorial: Introduction to Threejs Common Geometries (mvrlink.com)

Three.js Tutorial: Array Cube and Camera Adaptation Experience