three.js正投影相机OrthographicCamera

最新推荐文章于 2024-04-04 16:26:29 发布

xyphf_和派孔明

最新推荐文章于 2024-04-04 16:26:29 发布

阅读量440

点赞数

分类专栏： WEBGL/ThreeJS 文章标签： three.js 正交投影相机

本文链接：https://blog.csdn.net/xyphf/article/details/124863943

版权

WEBGL/ThreeJS 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

<!-- https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正投影相机OrthographicCamera</title>
    <style> body { margin: 0; 
        /* 隐藏body窗口区域滚动条 */ 
        overflow: hidden; } 
    </style>
    <!--引入three.js三维引擎-->
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
</head>
<body>
<script>
    /**
     * 【第一步】: 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 【第二步】: 创建网格模型
     */
    //创建一个球体几何对象
    // var geometry = new THREE.SphereGeometry(60, 40, 40);
    //创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(10, 10, 10);

    // 【第三步】: 创建材质对象Material，这里只是单单的给复制颜色
    var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });

    for(var i=-9;i<10;i++) {
        // 创建网格模型对象Mesh
        var mesh = new THREE.Mesh(geometry, material);
        // 设置模型位置 X 轴
        mesh.position.set(i*20, 0, 10);
        // 将网格模型添加到场景中
        scene.add(mesh);
    }
    for(var i=-9;i<10;i++) {
        // 网格模型对象Mesh
        var mesh = new THREE.Mesh(geometry, material);
        // 设置模型位置 Y 轴
        mesh.position.set(0, i*20, 10);
        // 将网格模型添加到场景中
        scene.add(mesh);
    }
    for(var i=-9;i<10;i++) {
        // 创建网格模型对象Mesh
        var mesh = new THREE.Mesh(geometry, material);
        // 设置模型位置 Z 轴
        mesh.position.set(0, 0, i*20);
        // 将网格模型添加到场景中
        scene.add(mesh);
    }

    /**
     * 【第四步】:光源设置
     */
    // 4-1 创建点光源
    var point = new THREE.PointLight(0xffffff);
    // 点光源位置
    point.position.set(400, 200, 300);
    // 点光源添加到场景中
    scene.add(point);
    // 4-2 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    // 将环境光添加到场景中
    scene.add(ambient);

    /**
     * 【第五步】: 相机设置 及 创建相机对象
     */
    // 创建正交投影相机对象 
    // https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera
    // 设置窗口的宽度为浏览器窗口宽度
    var width = window.innerWidth; 
    // 设置窗口的高度为浏览器窗口高度
    var height = window.innerHeight;
    // 正交投影相机OrthographicCamera参数为 
    var camera=new THREE.OrthographicCamera(
        width/2,   // left摄像机视锥体左侧面
        -width/2,  // right摄像机视锥体右侧面
        height/2,  // top摄像机视锥体上侧面
        -height/2, // bottom摄像机视锥体下侧面
        0.1,       // near摄像机视锥体近端面
        1000       // far摄像机视锥体远端面
    );
    // 设置相机位置
    camera.position.set(0, 0, 200);
    // 设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 【第六步】创建WebGL渲染器对象
     */
    // antialias为true开启抗锯齿
    var renderer = new THREE.WebGLRenderer({antialias:true});
    // 设置渲染区域尺寸
    renderer.setSize(width, height);
    // 设置背景颜色
    renderer.setClearColor(0xb9d3ff, 1);
    // body元素中插入canvas对象
    document.body.appendChild(renderer.domElement);

    /**
     * 【第七步】创建轨道控制器，实现用鼠标交互 旋转、平移，缩放
     * 关于OrbitControls轨道控制器的使用说明
     * http://www.yanhuangxueyuan.com/doc/Three.js/OrbitControls.html
     */
    var controlStore = new THREE.OrbitControls(
        camera, 
        renderer.domElement
    );
    // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
    controlStore.dampingFactor = 0.5;
    // 视角最小距离
    controlStore.minDistance = 0;
    // 视角最远距离
    controlStore.maxDistance = 2000;
    // 最大角度
    controlStore.maxPolarAngle = Math.PI / 2.2;
    function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }
    animate();
    //执行渲染操作 指定场景、相机作为参数
</script>
</body>
</html>

DEMO下载

更多参考》

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js正投影相机OrthographicCamera

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正投影相机OrthographicCamera</title> <style> body...
复制链接

扫一扫

专栏目录