腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript和canvas 3D模型查看器

问Javascript和canvas 3D模型查看器
EN

Stack Overflow用户

提问于 2011-04-28 20:58:25

回答 1查看 2.8K关注 0票数 3

我正在寻找一种方法，使我的网站使用Javascript和画布元素的3D模型查看器。类似于此页面上的内容：

http://minecraftbr.com/novaskin/

你可以看到模型(我的世界的家伙)被显示出来，你可以旋转和移动他。还需要对模型应用特定的皮肤。例如，每个“我的世界”的皮肤看起来像这样：

http://i.stack.imgur.com/AiBnl.png

然后将其映射到“我的世界”中，如下所示：

http://minecraftbr.com/novaskin/#http://imgur.com/AiBnl.png

老实说，这看起来很容易读取像素，然后应用正确的颜色。我真正需要的是3D方面的帮助，比如头部、身体、手臂、腿等的多边形。

有没有合适的Javascript库来做这类事情？它可以使在画布元素中使用3D多边形和东西变得容易。

感谢你的帮助，干杯。

javascript

canvas

回答 1

Stack Overflow用户

发布于 2011-07-17 12:03:42

我已经做了这样的东西，它在我的网站上，它是用Canvas和CSS3制作的。它将加载一个“我的世界”玩家的用户名，并使用他们的皮肤。我添加了在iPad/iPhone等设备上查看的基本功能，这样你就可以转动设备，模型就会移动，就像你在移动相机一样。链接是

mjstk.co.uk/dev/minechar/

或者用于在自定义用户的皮肤中加载(如果您想添加新的皮肤，可以上传/拖放新的皮肤)

mjstk.co.uk/dev/minechar/#minecraftusername

mjstk.co.uk/dev/minechar/#hugosslade (是我的)

如果您希望完全在canvas中完成这项工作，我会推荐three.js；虽然它确实支持WebGL，但它也可以利用canvas (以及其他东西)

希望这对你有帮助

票数 2

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

原文链接：

https://stackoverflow.com/questions/5824935

复制

javascript对象查看器

html seo javascript

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 3</title> </head> <body> <table border="1"> <tr> <td id="td">obj</td> </tr> </table> </body> <script language="javascript"> <!-- window.obj =

用户1183026

2018/01/19

1.9K0

基于 HTML5 Canvas 的 3D 模型列表贴图

html5

少量图片对于我们赋值是没有什么难度，但是如果图片的量大的话，我们肯定希望能很直接地显示在界面上供我们使用，再就是排放的位置等等，这些都需要比较直观的操作，在实际应用中会让我们省很多力以及时间。下面这个

HT for Web

2018/01/03

1.5K0

基于 HTML5 Canvas 的 3D 模型贴图问题

html5 gui html

之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作

HT_hightopo

2018/07/09

1K0

JavaScript·Canvas 基础用法

canvas api 渲染

<canvas> 标签只有两个可选的属性 width 和 height。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。宽高属性会自动忽略单位，以像素展示，所以使用 em 或 rem 等单位无效。

数媒派

2022/12/01

7340

xBIM 基础08 WeXplorer 简介

图像处理渲染 webgl json 网站

　　WeXplorer 是 XBIM 工具包的可视化部分，它使用预处理的 WexBIM 文件在 Web 上处理 IFC 数据的可视化。它使用像 WebGL 这样的尖端 Web 技术，所以它无法在旧浏览器中运行，Chrome或Mozzilla，IE11和其他支持该技术的应用程序都可以很好地工作。使用 xBIM Essentials 和 xBIM Geometry 创建优化的和可视化压缩的 WexBIM 文件。WeXplorer 还包含 xBrowser 用于可视化来自 JSON 的 COBIRET 数据。

张传宁IT讲堂

2019/09/17

9610

推荐一个牛逼的生物信息 Python 库 - Dash Bio

https 网络安全 github git

要开始使用 Dash Bio，请使用 pip install dash_bio 安装，然后转到 Dash Bio 的文档: http://dash.plot.ly/dash-bio

生信宝典

2019/09/16

2.8K0

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

html5

今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事

HT for Web

2018/01/03

1.3K0

OpenGL 3D 模型加载和渲染

图像处理 opengl api

在使用 OpenGL 绘制时，我们最多绘制的是一些简单的图形，比如三角形、圆形、立方体等，因为这些图形的顶点数量不多，还是可以手动的写出那些顶点的，可要是绘制一些复杂图形该怎么办呢？

音视频开发进阶

2019/07/25

3.2K0

使用 JavaScript 和 canvas 做精确的像素碰撞检测

人工智能图像处理

原文：Pixel accurate collision detection with Javascript and Canvas 译者：nzbin 我正在开发一个需要再次使用碰撞检测的游戏。我通常会使用简单高效的盒模型碰撞检测。盒子模型的主要原则就是把所有的物体都抽象成正方形，如果两个正方形有重叠，就认为是一次碰撞。这通常是一个简单的游戏所需要的。但是因为这种模型我之前用过多次，我想尝试一些更深刻更准确的方法。我选择从像素级层面来看是否发生了碰撞。首先我要了解“像素是什么”。我测试的元素透明度都不为

叙帝利

2018/01/17

1.8K0

JavaScript 3D 图表

图像处理 canvas webgl javascript 数据结构

在说 3D 图表以前，首先要明确两个概念，一个是数据的维度，一个是呈现数据载体的维度。对于数据的维度，一维的数据呈现，但是呈现的载体是二维的平面图，比如饼图：

四火

2022/07/15

9520

使用PolyGen和PyTorch生成3D模型

图像处理 css

深度学习研究的一个新兴领域是致力于将DL技术应用于3D几何和计算机图形应用程序，对于希望自己尝试3D深度学习的PyTorch用户而言，一个叫Kaolin 库值得研究。对于TensorFlow用户，还有TensorFlow Graphics库。3D技术中一个特别热门的子领域是3D模型的生成。创造性地组合3D模型，从图像快速生成3D模型，以及为其他机器学习应用程序和模拟创建综合数据，这只是3D模型生成的众多用例中的少数几个。

deephub

2020/11/09

1.6K0

xBIM 基础11 WeXplorer 常用事件

网站

　　本篇将介绍查看器在不同场合触发的事件。所有这些都记录在xViewer中。如果您从Web服务器运行本教程，可以在此处查看完整的实例。并且确保您的网络服务器设置为作为静态内容提供wexBIM文件。

张传宁IT讲堂

2019/09/17

4990

OpenGL ES 3D 模型的加载和渲染

图像处理渲染 node.js 编程算法

上一节简单介绍了常用的 3D 模型文件 Obj 的数据结构和模型加载库 Assimp 的编译，本节主要介绍如何使用 Assimp 加载 3D 模型文件和渲染 3D 模型。

字节流动

2020/09/22

1.8K0

xBIM 基础10 WeXplorer 浏览器检查

webgl

　　在上一篇《xBIM基础 09 WeXplorer 基本应用》已经提到，查看器不会在所有浏览器的所有设备上运行。为了操作效率和简单，决定使用最新技术。浏览器应该满足几个先决条件才能运行查看器。请不要放弃检查浏览器的版本，它可以运行在带有 Chrome 或 Mozilla 的几年前的个人电脑上，并将运行在平板电脑和移动设备上。主要制约因素是关于IE 的，直到 IE11才支持 WebGL。为了开发与用户体验更友好，查看器有一个静态功能来检查它的运行要求。

张传宁IT讲堂

2019/09/17

4550

基于JavaScript的Web端股票价格查看器——大道

https api 网络安全 php 网站

当下互联网发展迅速，互联网已经不断向传统金融领域渗透。在互联网上有大量金融领域的数据，如何利用好这些数据，对于投资者来说是十分重要的一件事情。股票价格实时变化，而大道至简(先人说的都对)，我们能不能实现一种最简单的股票价格查看器，通过在网页上访问，以满足用户的股票价格查看需求。

Regan Yue

2022/09/19

8390

浅谈JavaScript的Canvas（绘制图形）

javascript

　　HTML5中新增加的一个元素canvas，要使用canvas元素，浏览器必须支持html5。通过canvas标签来创建元素，并需要为canvas指定宽度和高度，也就是绘图区域的大小。 <canvas id="mycanvas" style="width:500px;height:500px;"></canvas> 。要在canvas上画图，需要取得canvas的上下文，通过getContext方法来获取上下文。 var context=canvas.getContext("2d"); 在使用getCon

水击三千

2018/02/27

1.7K0

【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期

2023腾讯·技术创作特训营第一期

本文是专题类文章，主要是针对数字孪生和WEB 3D可视化展开，下面是数字孪生相关概念。

愚公搬代码

2023/08/27

7170

【案例】Canvas酷炫3D拖动圆点动画特效

图像处理 canvas 网站

今天段老师给同学们分享的是html5基于canvas制作酷炫拖动的3D圆点粒子背景动画特效。

用户1730674

2019/11/25

2.3K0

JS 3D 模型

编程算法图像处理 http

最近断断续续地写出了这么个东西：http://ucren.com/demos/d3d/index.html。

py3study

2020/01/07

3K0

原基于HTML5 Canvas的3D动态

html5

发现现在工业SCADA上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 做了一个小例子，挺简单的，也挺好看的，哈哈~ Demo 地址： http://www.hightopo.com/demo/WireframeAnim/index.html 这个例子用 HT 实现真的很容易，首先创建一

HT_hightopo

2018/07/06

1K0

相似问题

Canvas 3D查看器透视图

嵌入3D模型查看器

模型查看器库不加载3d模型

C# 3d模型查看器

3D模型查看器未加载

210

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问Javascript和canvas 3D模型查看器
EN