前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >摄像机、投影、3D旋转、缩放

摄像机、投影、3D旋转、缩放

作者头像
IMWeb前端团队
发布于 2018-01-08 17:24:36
1.7K0
发布于 2018-01-08 17:24:36
举报
文章被收录于专栏：IMWeb前端团队

本文作者：IMWeb 黎腾 原文出处：IMWeb社区 未经同意，禁止转载

简述

3D效果分两种，一种是伪3D骨架，一种是3D实体.

3D骨架：是通过大量的计算将3D世界中所有点投影 到二维平面中。

3D实体:通过摄像机向投影面发射射线与世界中的物体交汇，把与物体交汇点的颜色渲染 到投影面** （光线追踪的基础） 。**本系列的所有演示都是3D骨架，非3D实体。本文将穿插图片、公式、代码、演示，让读者深刻理解3D的基本概念极其思想。

对象及概念介绍

对象一：摄像机。

大家都有一个基本常识，在不同的角度观看到的物体是不同的。摄像机对象有自己的空间的坐标（vidiconX,vidiconY,vidiconZ）。

对象二：显示屏

任何三维物体，都会以二维的形式投影在显示屏上，显示屏垂直于摄像机的观测方向，所以摄像机的空间坐标变化，会导致显示屏的坐标系的变换。

对象三：被观察测物体

任何物体都是有无数个点构成，每个点有自己的空间坐标（x,y,z）,显示屏介于摄像机和物体之间。

为了降低复杂度，本文将显示屏和被观测物体所处的坐标系公用一套（x,y）,所有的旋转都是物体旋转，摄像机不动！

缩放原理：摄像机不动，被观察测物体不动，显示屏离摄像机越近，缩放比例越小，显示屏离摄像机越远，缩放比例越大。

投影分析

我们来看下面这张图：

因为，我们将显示屏和被观测物体共用一个坐标系，所以，我们可以计算出点（x1,y1,z1）投影到显示屏上的点的缩放比例为：

h / Math.abs(vidiconZ - z1)

所以投影后的坐标为：

x = x1 * h / Math.abs(vidiconZ - z);

y= y1 * h / Math.abs(vidiconZ - z);

有了以上这些知识，我们可以轻松的在Canvas里画一个正方体（再次强调，是根据计算的结果画，非人类经验）。

代码语言：javascript
复制
<canvas id="myCanvas" width="700" height="500" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.lineWidth = 3;
    //正方体8个顶点
    var Point1 = { x: 100, y: 100, z: 100 };
    var Point2 = { x: 100, y: 100, z: -100 };
    var Point3 = { x: -100, y: 100, z: -100 };
    var Point4 = { x: -100, y: 100, z: 100 };
    var Point_1 = { x: 100, y: -100, z: 100 };
    var Point_2 = { x: 100, y: -100, z: -100 };
    var Point_3 = { x: -100, y: -100, z: -100 };
    var Point_4 = { x: -100, y: -100, z: 100 };
    var startX = 250;
    var startY = 250;
    //摄像机到显示屏的距离
    var distance = 500;
    //摄像机位置
    var eyePosition = { x: 0, y: 0, z: 700 };
    function changeDistance() {
        Point1.x = Point1.x * distance / Math.abs(eyePosition.z - Point1.z);
        Point1.y = Point1.y * distance / Math.abs(eyePosition.z - Point1.z);
        Point2.x = Point2.x * distance / Math.abs(eyePosition.z - Point2.z);
        Point2.y = Point2.y * distance / Math.abs(eyePosition.z - Point2.z);
        Point3.x = Point3.x * distance / Math.abs(eyePosition.z - Point3.z);
        Point3.y = Point3.y * distance / Math.abs(eyePosition.z - Point3.z);
        Point4.x = Point4.x * distance / Math.abs(eyePosition.z - Point4.z);
        Point4.y = Point4.y * distance / Math.abs(eyePosition.z - Point4.z);
        Point_1.x = Point_1.x * distance / Math.abs(eyePosition.z - Point_1.z);
        Point_1.y = Point_1.y * distance / Math.abs(eyePosition.z - Point_1.z);
        Point_2.x = Point_2.x * distance / Math.abs(eyePosition.z - Point_2.z);
        Point_2.y = Point_2.y * distance / Math.abs(eyePosition.z - Point_2.z);
        Point_3.x = Point_3.x * distance / Math.abs(eyePosition.z - Point_3.z);
        Point_3.y = Point_3.y * distance / Math.abs(eyePosition.z - Point_3.z);
        Point_4.x = Point_4.x * distance / Math.abs(eyePosition.z - Point_4.z);
        Point_4.y = Point_4.y * distance / Math.abs(eyePosition.z - Point_4.z);
    }
    var drawCube = function () {
        changeDistance();
        cxt.beginPath();
        cxt.moveTo(startX + Point1.x, startY - Point1.y);
        cxt.lineTo(startX + Point2.x, startY - Point2.y);
        cxt.lineTo(startX + Point3.x, startY - Point3.y);
        cxt.lineTo(startX + Point4.x, startY - Point4.y);
        cxt.lineTo(startX + Point1.x, startY - Point1.y);
        cxt.moveTo(startX + Point_1.x, startY - Point_1.y);
        cxt.lineTo(startX + Point_2.x, startY - Point_2.y);
        cxt.lineTo(startX + Point_3.x, startY - Point_3.y);
        cxt.lineTo(startX + Point_4.x, startY - Point_4.y);
        cxt.lineTo(startX + Point_1.x, startY - Point_1.y);
        cxt.moveTo(startX + Point2.x, startY - Point2.y);
        cxt.lineTo(startX + Point_2.x, startY - Point_2.y);
        cxt.moveTo(startX + Point1.x, startY - Point1.y);
        cxt.lineTo(startX + Point_1.x, startY - Point_1.y);
        cxt.moveTo(startX + Point3.x, startY - Point3.y);
        cxt.lineTo(startX + Point_3.x, startY - Point_3.y);
        cxt.moveTo(startX + Point4.x, startY - Point4.y);
        cxt.lineTo(startX + Point_4.x, startY - Point_4.y);
        cxt.stroke();
    }
</script>
<div id="show">
</div>
<input type="button" onclick="drawCube();" value="开始画立方体"
style="width: 135px" />

演示

Your browser does not support the canvas element. 当然我们可以重构一下，将8个点都放到Array中。

代码语言：javascript
复制
<script type="text/javascript">
     var c = document.getElementById("myCanvas");
     var cxt = c.getContext("2d");
     cxt.lineWidth = 3;
     //正方体8个顶点
     var Point = new Array();
     Point[0] = { x: 100, y: 100, z: 100 };
     Point[1] = { x: 100, y: 100, z: -100 };
     Point[2] = { x: -100, y: 100, z: -100 };
     Point[3] = { x: -100, y: 100, z: 100 };
     Point[4] = { x: 100, y: -100, z: 100 };
     Point[5] = { x: 100, y: -100, z: -100 };
     Point[6] = { x: -100, y: -100, z: -100 };
     Point[7] = { x: -100, y: -100, z: 100 };
     var startX = 250;
     var startY = 250;
     //摄像机到显示屏的距离
     var distance = 500;
     //摄像机位置
     var eyePosition = { x: 0, y: 0, z: 700 };
     function changeDistance() {
         for (var i = 0; i < Point.length; i++) {
             Point[i].x = Point[i].x * distance / Math.abs(eyePosition.z - Point[i].z);
             Point[i].y = Point[i].y * distance / Math.abs(eyePosition.z - Point[i].z);
         }
     }
     var drawCube = function () {
         changeDistance();
         cxt.beginPath();
         cxt.moveTo(startX + Point[0].x, startY - Point[0].y);
         cxt.lineTo(startX + Point[1].x, startY - Point[1].y);
         cxt.lineTo(startX + Point[2].x, startY - Point[2].y);
         cxt.lineTo(startX + Point[3].x, startY - Point[3].y);
         cxt.lineTo(startX + Point[0].x, startY - Point[0].y);
         cxt.moveTo(startX + Point[4].x, startY - Point[4].y);
         cxt.lineTo(startX + Point[5].x, startY - Point[5].y);
         cxt.lineTo(startX + Point[6].x, startY - Point[6].y);
         cxt.lineTo(startX + Point[7].x, startY - Point[7].y);
         cxt.lineTo(startX + Point[4].x, startY - Point[4].y);
         cxt.moveTo(startX + Point[1].x, startY - Point[1].y);
         cxt.lineTo(startX + Point[5].x, startY - Point[5].y);
         cxt.moveTo(startX + Point[0].x, startY - Point[0].y);
         cxt.lineTo(startX + Point[4].x, startY - Point[4].y);
         cxt.moveTo(startX + Point[2].x, startY - Point[2].y);
         cxt.lineTo(startX + Point[6].x, startY - Point[6].y);
         cxt.moveTo(startX + Point[3].x, startY - Point[3].y);
         cxt.lineTo(startX + Point[7].x, startY - Point[7].y);
         cxt.stroke();
     }
</script>

现在，我们看到了正方体正常的显示在画布当中，那么我们现在来用演示证明一下缩放原理

缩放原理：摄像机不动，被观察测物体不动，显示屏离摄像机越近，缩放比例越小，显示屏离摄像机越远，缩放比例越大。

代码语言：javascript
复制
<script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script>
<script language="javascript" type="text/javascript" src="src/jscex.js"></script>
<script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script>
<script language="javascript" type="text/javascript" src="src/jscex.async.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript" src="lib/json2.js"></script>
<script language="javascript">
Jscex.config.codeGenerator = function (code) { return "false || " + code; }
</script>
<![endif]-->
<canvas id="myCanvas" width="700" height="500" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.lineWidth = 3;
    var Point = new Array();
    var startX = 250;
    var startY = 250;
    var distance = 500;
    var eyePosition = { x: 0, y: 0, z: 700 };
    function init() {
        Point[0] = { x: 100, y: 100, z: 100 };
        Point[1] = { x: 100, y: 100, z: -100 };
        Point[2] = { x: -100, y: 100, z: -100 };
        Point[3] = { x: -100, y: 100, z: 100 };
        Point[4] = { x: 100, y: -100, z: 100 };
        Point[5] = { x: 100, y: -100, z: -100 };
        Point[6] = { x: -100, y: -100, z: -100 };
        Point[7] = { x: -100, y: -100, z: 100 };
    }
    function changeDistance() {
        for (var i = 0; i < Point.length; i++) {
            Point[i].x = Point[i].x * distance / Math.abs(eyePosition.z - Point[i].z);
            Point[i].y = Point[i].y * distance / Math.abs(eyePosition.z - Point[i].z);
        }
    }
    var drawCube = function (increment) {
        cxt.clearRect(0, 0, 1200, 1200);
        init();
        distance += increment;
        changeDistance();
        cxt.beginPath();
        cxt.moveTo(startX + Point[0].x, startY - Point[0].y);
        cxt.lineTo(startX + Point[1].x, startY - Point[1].y);
        cxt.lineTo(startX + Point[2].x, startY - Point[2].y);
        cxt.lineTo(startX + Point[3].x, startY - Point[3].y);
        cxt.lineTo(startX + Point[0].x, startY - Point[0].y);
        cxt.moveTo(startX + Point[4].x, startY - Point[4].y);
        cxt.lineTo(startX + Point[5].x, startY - Point[5].y);
        cxt.lineTo(startX + Point[6].x, startY - Point[6].y);
        cxt.lineTo(startX + Point[7].x, startY - Point[7].y);
        cxt.lineTo(startX + Point[4].x, startY - Point[4].y);
        cxt.moveTo(startX + Point[1].x, startY - Point[1].y);
        cxt.lineTo(startX + Point[5].x, startY - Point[5].y);
        cxt.moveTo(startX + Point[0].x, startY - Point[0].y);
        cxt.lineTo(startX + Point[4].x, startY - Point[4].y);
        cxt.moveTo(startX + Point[2].x, startY - Point[2].y);
        cxt.lineTo(startX + Point[6].x, startY - Point[6].y);
        cxt.moveTo(startX + Point[3].x, startY - Point[3].y);
        cxt.lineTo(startX + Point[7].x, startY - Point[7].y);
        cxt.stroke();
    }
    var reduceDrawCubeAsync = eval(Jscex.compile("async", function () {
        //当摄像机到显示屏的距离大于750，退出循环·
        while (distance < 750) {
            drawCube(10);
            $await(Jscex.Async.sleep(100));
        }
    }));
    var magnifyDrawCubeAsync = eval(Jscex.compile("async", function () {
        //当摄像机到显示屏的距离小于150，退出循环·
        while (distance > 150) {
            drawCube(-10);
            $await(Jscex.Async.sleep(100));
        }
    }));
    var executeAsync = eval(Jscex.compile("async", function () {
        $await(reduceDrawCubeAsync());
        $await(magnifyDrawCubeAsync());
    }));
</script>
<div id="show">
</div>
<input type="button" onclick="executeAsync().start();" value="开始移动显示屏" style="width: 135px" />

可以看到，我们定义了两个异步任务reduceDrawCubeAsync 和magnifyDrawCubeAsync ，把它们放到executeAsync 队列当中，

他们会从上倒下，依次执行。

演示

Your browser does not support the canvas element. ## 3D旋转

上面讲了摄像机，投影以及缩放的原理以及实现，下面看旋转。

首先，在三维坐标系当中，任何角度的任何旋转可以拆分成三类：

a.绕X轴方向的旋转，此时，y和z发生变化，x不变。
b.绕Y轴方向的旋转，此时，x和z发生变化，y不变。
a.绕Z轴方向的旋转，此时，x和y发生变化，x不变。

那么x和z到底变化多少呢？我们可以看一下切面图，然后计算出坐标的变化！

或者我们也可以直接翻到大学教材书本第七章【三维旋转矩阵】：

我们拿绕y轴旋转为例子，如：

代码语言：javascript
复制
//旋转
    function rotate(angle) {
        for (var i = 0; i < Points.length; i++) {
            var tempX = Points[i].x;
            Points[i].x = Points[i].x * Math.cos(angle) - Points[i].z * Math.sin(angle);
            Points[i].z = Points[i].z * Math.cos(angle) + tempX * Math.sin(angle);
        }
    }

我们要记住，旋转之后的坐标是在坐标系当中的坐标，我们还要讲其投影到显示屏，所以我们应当先旋转---再投影，顺序不能弄反。

定义一个角度转弧度：

代码语言：javascript
复制
function degToRad(a) {
        return (a / (360 / (2 * Math.PI)));
    }

立方体颜色变化：

代码语言：javascript
复制
function randomColor() {
        var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#";
        var index;
        for (var i = 0; i < 6; i++) {
            index = Math.round(Math.random() * 15);
            strHex += arrHex[index];
        }
        return strHex;
    }

旋转控制核心，我们依然用Jscex：

代码语言：javascript
复制
var currentAngle = 0;
    var drawCube2 = function () {
        cxt2.clearRect(0, 0, 1200, 1200);
        init();
        rotate(degToRad(currentAngle))
        changedistance2();
        cxt2.strokeStyle = randomColor();
        cxt2.beginPath();
        cxt2.moveTo(startX + Points[0].x, startY - Points[0].y);
        cxt2.lineTo(startX + Points[1].x, startY - Points[1].y);
        cxt2.lineTo(startX + Points[2].x, startY - Points[2].y);
        cxt2.lineTo(startX + Points[3].x, startY - Points[3].y);
        cxt2.lineTo(startX + Points[0].x, startY - Points[0].y);
        cxt2.moveTo(startX + Points[4].x, startY - Points[4].y);
        cxt2.lineTo(startX + Points[5].x, startY - Points[5].y);
        cxt2.lineTo(startX + Points[6].x, startY - Points[6].y);
        cxt2.lineTo(startX + Points[7].x, startY - Points[7].y);
        cxt2.lineTo(startX + Points[4].x, startY - Points[4].y);
        cxt2.moveTo(startX + Points[1].x, startY - Points[1].y);
        cxt2.lineTo(startX + Points[5].x, startY - Points[5].y);
        cxt2.moveTo(startX + Points[0].x, startY - Points[0].y);
        cxt2.lineTo(startX + Points[4].x, startY - Points[4].y);
        cxt2.moveTo(startX + Points[2].x, startY - Points[2].y);
        cxt2.lineTo(startX + Points[6].x, startY - Points[6].y);
        cxt2.moveTo(startX + Points[3].x, startY - Points[3].y);
        cxt2.lineTo(startX + Points[7].x, startY - Points[7].y);
        cxt2.stroke();
    }
    drawCube2()
    var rotateAsync = eval(Jscex.compile("async", function () {
        while (true) {
            currentAngle += 5;
            drawCube2();
            $await(Jscex.Async.sleep(100));
        }
    }));

演示

Your browser does not support the canvas element.

我们也可以让它绕着X轴旋转：

代码语言：javascript
复制
for (var i = 0; i < Points4.length; i++) {
        var tempY = Points4[i].y;
        Points4[i].y = Points4[i].z * Math.sin(angle) - Points4[i].y * Math.cos(angle)
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
图像处理

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

图像处理
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 简述
    • 3D骨架：是通过大量的计算将3D世界中所有点投影 到二维平面中。
    • 对象及概念介绍
    • 投影分析
      • h / Math.abs(vidiconZ - z1)
      • 演示
      • 演示
        • a.绕X轴方向的旋转，此时，y和z发生变化，x不变。
          • b.绕Y轴方向的旋转，此时，x和z发生变化，y不变。
            • a.绕Z轴方向的旋转，此时，x和y发生变化，x不变。
            • 演示
            相关产品与服务
            图像处理
            图像处理基于腾讯云深度学习等人工智能技术，提供综合性的图像优化处理服务，包括图像质量评估、图像清晰度增强、图像智能裁剪等。
            产品介绍产品文档
            11.11 上云拼团GO
            领券

            腾讯云开发者

            扫码关注腾讯云开发者

            扫码关注腾讯云开发者

            领取腾讯云代金券

            热门产品

            热门推荐

            更多推荐

            Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

            深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

            腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

            Copyright © 2013 - 2024 Tencent Cloud.

            All Rights Reserved. 腾讯云 版权所有

            登录 后参与评论