three.js透视投影相机PerspectiveCamera

最新推荐文章于 2024-08-29 19:30:00 发布

xyphf_和派孔明

最新推荐文章于 2024-08-29 19:30:00 发布

阅读量1.2k

点赞数

分类专栏： WEBGL/ThreeJS

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

版权

WEBGL/ThreeJS 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

这里我们演示three.js透视相机的使用

<!-- https://threejs.org/docs/index.html#api/zh/cameras/PerspectiveCamera -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透视投影相机PerspectiveCamera</title>
    <style>
        body { margin: 0; overflow: hidden;/* 隐藏body窗口区域滚动条 */ }
        .container { width: 500px; height: 500px; position: absolute; 
        right: 0; top: 50%; margin-top: -250px; border: 1px solid #000000; }
    </style>
    <!--引入three.js三维引擎-->
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
</head>
<body>
    <!-- 定义容器 也就是canvas放在哪 -->
    <div class="container" id="container"></div>
<script>
    // var div; // 容器id 如果不定义元素id则默认放到body中 也就是全屏模式
    var div = 'container' // 如果定义了元素id则放到元素中

    /**
     * 第一步: 创建场景对象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=-3;i<8;i++) {
        // 创建网格模型对象Mesh
        var mesh = new THREE.Mesh(geometry, material);
        // 设置模型位置 X 轴
        mesh.position.set(i*20, 0, 0);
        // 将网格模型添加到场景中
        scene.add(mesh);
    }

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

    /**
     * 第四步: 相机设置
     */
    function getwidth (div) { // 获取元素的宽
        return parseInt(window.getComputedStyle(document.getElementById(div)).width)
    }
    function getHeight (div) { // 获取元素的高
        return parseInt(window.getComputedStyle(document.getElementById(div)).height)
    }
     // 窗口宽度 如果定义了容器就用这个容器宽高 否则获取浏览器宽高
    var width = div ? getwidth(div) : window.innerWidth;
    // 窗口高度
    var height = div ? getHeight(div) : window.innerHeight;

    /**
     * 第五步: 创建透视相机对象
     * fov — 摄像机视锥体垂直视野角度
     * aspect — 摄像机视锥体长宽比
     * near — 摄像机视锥体近端面
     * far — 摄像机视锥体远端面
     */
    var camera=new THREE.PerspectiveCamera(45, width / height, 1, 500);
    // 设置相机位置
    camera.position.set(20, 100, 100);
    // 设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 第六步: 创建渲染器对象
     */
    // antialias为true开启抗锯齿 alpha允许背景设置为透明
    var renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
    // 设置渲染区域尺寸 宽高
    renderer.setSize(width, height);
    // 设置背景颜色和背景透明图 如要启用背景透明度 上面alpha必须为true
    renderer.setClearColor(0x0000ff, 0.5); 
    // 设置分辨率为当前设备的分辨率,解决场景模糊，抗锯齿的一-种很好的方法
    renderer.setPixelRatio(window.devicePixelRatio);
    if (div) { // 如果定义了容器就放入这个容器 否则放入body中
        document.getElementById(div).appendChild(renderer.domElement);
    } else {
        // 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>

全屏模式