草庐IT

3D呈现

全部标签

javascript - 使用 SVG 或 WebGL 的 3D 形状

您好,我想在浏览器中渲染一个交互式3D球体。它上面的纹理将是一张世界地图,所以基本上我试图创建一个可以使用map在任何方向旋转的地球仪。我很擅长使用SVG渲染2D图像,但不确定如何在SVG中渲染3D形状。是否可以在SVG中渲染3D形状,如果可以,如何渲染?如果不是,WebGl是更好的选择吗? 最佳答案 看看three.js它对实现进行了一些抽象(带有WebGL/SVG/Canvas后端)。SVG是一种2d矢量图形格式,但您可以将3d形状投影到2d上,因此可以使用SVG渲染3d对象,这只是一些工作(最好留给javascript库)。

javascript - 倒计时计时器无法在 Chrome/Safari 上正确呈现,但在 Firefox 上可以

functioncountDownRound(){if(myRoundTimeRemaining>=0){varsecs=myRoundTimeRemaining;if(secs上面的代码在Firefox上执行了预期的操作。“倒计时”元素中每秒显示一个递减的数字。在Safari和Chrome上,代码运行正常,但屏幕上的元素没有改变。如果发生其他事情(例如调整浏览器窗口的大小),元素会同时正确更新。这看起来像是某种优化或基于线程的问题,但我找不到解决方案。 最佳答案 我在Chrome、Safari和Firefox上也能正常工作。也许在

javascript - 无论框架如何,在 UI 呈现最佳实践后发布/订阅事件是否是最佳实践?

我继承了相当大的Javascript/ExtJS3代码库,在调用“...superclass.initComponent.apply(this,arguments)”之后,重写的initComponent方法中有许多调用事件的实例.正在以如下方式在特定对象上调用特定事件:this.filter.on('filterUpdated',function(filter,params)我已经开始将代码转换为使用pub/sub范例,以减少对象与其特定事件名称之间的耦合,但在initComponent中发布和/或订阅事件时很快遇到问题(在ExtJS中在渲染之前执行)。当屏幕首次加载时,我需要从最高

javascript - 为什么 translate3d 会泄漏 DOM 节点?

考虑这个HTML页面:http://jsbin.com/aYUcelo/1/(我建议下载它以摆脱所有jsbin噪音)。点击GO按钮,一个div被添加到正文中。RM删除其中一个div。它还将两种样式之一应用于新的div:newDiv.style.color="red";//ornewDiv.style.WebkitTransform="translate3d(0px,0px,0px)";可以看到chromedevtoolsmemorytimeline中的节点数量不断增加,如果应用了WebkitTransform,GC无法移除。红色样式不会发生这种情况。编辑:只是为了明确应用“红色样式”添

javascript - 使用 bower 将 3rd 方模块安装到 yeoman 生成的 Angular 应用程序中不起作用 - 没有呈现任何内容,也没有错误

我在我的Angular应用程序中包含一些第3方模块时遇到问题,它们的包含导致页面不呈现任何内容。这发生在2个不同的模块上,我尝试了2个不同的Angular生成器(angular-generator和cg-angular),所以这让我觉得我做错了什么。这是timerdirective的示例.我从应用程序根目录运行此命令并确认包已安装在bower_components目录中:bowerinstallangular-timer我将此行添加到index.html以获取指令:我在app.js中将它注入(inject)到我的应用程序中:angular.module('myapp',['timer'

javascript - 在 jQuery UI 自动完成中呈现多个列表

我正在尝试构建涵盖多个对象/模型的网站搜索,我想使用jQueryAutocomplete来动态显示数据。问题是,我想传递三个json列表而不是一个,并显示三个列表(),而不是一个。我通过将包含json列表的字典作为source传递来做到这一点,但我不知道如何分别覆盖每个字典条目。我想我必须使用_renderMenu和_renderItem,但我不知道该怎么做。提前致谢。编辑我可以随心所欲地操作数据;现在我有:{"ingredients":"[]","products":"[]","news":"[{"id":7,"value":"Testrevisionjjjj","label":"T

javascript - 单击元素时一种模式呈现不同的模板

我有不同的按钮(一个用于创建“冲刺”,另一个用于创建评论,等等)。执行这些任务的表单附加到一个模式对话框中,当您单击不同的按钮时会显示该对话框。这些是流程:点击“Sprint”按钮>附加“Sprint”表单>显示模态然后如果你点击其他按钮:点击“评论”按钮>清空模态内容>附加“评论”表单>显示模态目前,不同的内容保存在一个字符串中,当您单击按钮时,它会附加到模态框。但现在我正在使用Backbone和Underscore模板,但我不知道如何做同样的事情。我不想将所有模板都放在模式中并根据您单击的按钮显示它们;我想在点击时附加一个已经缓存的模板。有没有办法用Backbone和Undersc

javascript - 3D CSS 变换 : translateZ causes elements to disappear in Chrome

我正在使用Javascript在Chrome中操作CSS转换,我注意到当translateZ值变得太低(很远)时,元素将会消失。这似乎只有在有大量元素时才会发生。这似乎与元素的z-index有关。这是问题的一个例子:http://jsbin.com/iZAYaRI/26/edit将鼠标悬停在输出上以查看问题。有人知道为什么会这样吗?更新:看起来该元素并没有真正消失,而是移动了一千个像素左右。 最佳答案 在我的例子中,z平移属性大约为零。将我的零翻译从0更改为1解决了我的问题。在safari中运行的原始代码:transform:sca

javascript - 呈现 HTML+Javascript 服务器端

我需要在服务器端呈现HTML页面并“提取”Canvas元素的原始字节,以便将其保存为PNG。问题是,canvas元素是从javascript创建的(我基本上是使用jquery的Flot生成图表)。所以我想我需要一种方法来从浏览器“托管”DOM+Javascript功能,而无需实际使用浏览器。我选择了mshtml(但对任何和所有建议持开放态度),因为它似乎应该能够做到这一点。这是一个ASP.NETMVC项目。我已经进行了广泛的搜索,但没有看到任何结论。所以我有这个简单的HTML-示例尽可能简单来演示问题-Wowfunctionsimple(){$("#hello").append("He

javascript - 将鼠标坐标转换为 3D 平面图

我正在使用javascript/jquery(基于DOM,而非Canvas)构建某种拖放应用程序。想法是能够在3D场景上拖动div(在3D中旋转的div)。它在2D平面上工作,问题是当我在3D中旋转场景时,对象位置不反射(reflect)实际鼠标位置,而是在3D中转换的坐标示例:EXEMPLEONJSFIDDLE我希望对象相对于鼠标的绝对位置移动。我这样计算鼠标位置:document.addEventListener(gestureMove,function(event){if(mouseDown==true){event.preventDefault();moveX=(event.p