首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在z轴上使用HTML5画布?以及如何移动画布的眼睛视图?

在z轴上使用HTML5画布?以及如何移动画布的眼睛视图?
EN

Stack Overflow用户
提问于 2010-07-30 11:20:38
回答 2查看 6.5K关注 0票数 1

如何在绘制和移动模型时使用z轴?

目前,我的代码中包含以下内容:

代码语言:javascript
运行
复制
var canvas = {
    obj: document.querySelector("canvas"),
    models: [{
        start: [10, 10, 10],
        end: [1, 20, 20],
        color: "silver",
    },{ start: [30, 30, 30],
        end: [10, 1, 10],
        color: "silver",
    },{ start: [60, 60, 60],
        end: [10, 10, 10],
        color: "silver",
    }],
    data: {},
    draw: (function () {
        if (this.obj.getContext) {
            this.data.ctx = this.obj.getContext('2d');
            this.models.forEach(function () {
                canvas.data.ctx.fillStyle = this.color;
                canvas.data.ctx.fillRect(this["start"][0], this["start"][1], this["end"][0], this["end"][1]);
            }));
        }
        return this
    })
}.draw()

我知道3d可以在2d画布中使用,例如Pre3D library

所以我正在尝试做的是有一个商店项目的模型,并能够在3D中平移和查看它…我仍然不知道如何移动所有东西,但现在我正在询问如何将z轴移动到那里……然后我会问如何移动画布。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-07-30 11:41:10

canvas是一个二维曲面。您需要将三维模型的像素投影到表面上。请参阅http://en.wikipedia.org/wiki/Graphical_projection

票数 6
EN

Stack Overflow用户

发布于 2010-07-30 17:53:33

如果你想在画布元素上绘制3D,你需要使用WebGL,它基本上是通过调用canvas.getContext('3d'); (而不是'2d')来完成的。这在浏览器中的支持是有限的(Google Chrome支持)。看看http://learningwebgl.com/blog/?cat=5上的一些WebGL教程

可以使用标准的2d Canvas上下文制作基本的3D图形,请查看Opera的Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

但你所要求的并不是微不足道的,而且需要对3D图形投影有基本的了解。你不会得到一个涉及发布一些你可以简单地复制'n‘粘贴的代码的答案。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3368508

复制
相关文章

相似问题

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