我们来学一学threejs的相机。深度学习，了解！

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>threejs之相机</title>
       <script src="../js/three.js"></script>
   </head>

           // 创建一个摄像机，它定义了我们所处的位置.
           var fov = 45,aspect = window.innerWidth / window.innerHeight,near = 0.1,far = 1000;

           //fov参数指定视角，aspect指定视图宽高比，后两个参数指定近平面和远平面。透视相机的视域是一个台体：
           var camera1 = new THREE.PerspectiveCamera(fov, aspect, near, far);//透视相机



           var frustumSize = 400
           var aspect = window.innerWidth / window.innerHeight;
               camera2 = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, .1, 100 );
               //这个六个参数即是指定视域的左右上下近远六个范围。正交相机的视域是立方体
               camera2.position.set(30,0,25);

           // 创建渲染并设置大小指定渲染canvas对象
           var renderer = new THREE.WebGLRenderer({
               canvas: document.querySelector("#cc")
           });

renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);

           //创建一个xyz坐标轴，方便初学者理解三维坐标
           var axes = new THREE.AxesHelper(20);
           scene.add(axes);

           //创建网格模型

           var sphereGeometry = new THREE.CubeGeometry(10, 20, 20);//我们就创建个立方体。
           var material = new THREE.MeshBasicMaterial ({color:Math.random()*0xffffff})//基础材质
           var cube = new THREE.Mesh(sphereGeometry,material)

           scene.add(cube)

           //设置相机位置
           camera1.position.set(-30,40,30);

           camera1.lookAt(scene.position);

           // 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现

           const draw = function(){
               requestAnimationFrame(draw)//不断绘制
               renderer.render(scene, camera1);//透视相机渲染
               //renderer.render(scene, camera2);//正交相机渲染

               cube.rotation.y+=0.01//网格模型旋转
           }
           draw()
       </script>
   </body>

</html>

我们来学一学threejs的相机。深度学习，了解！

猜你喜欢