草庐IT

javascript - 渲染结果像素化(或 : has lower resolution that it should)

coder 2025-02-17 原文

我正在做一些原型(prototype)设计，我正在使用 three.js(版本 68)以 3D 形式显示一些数据。整个动画的预期结果将是一堆彩色球(代表根据某种模式着色的质子和中子)。一切正常，但由于我不知道的原因，渲染的结果是像素化的。

当前版本基本上是这样的(这张图片宽约 400 像素):

我检查了所有明显的事情，例如:传递不正确的分辨率、浏览器缩放等等。

您可以在 this fiddle 上查看此问题, 并下载 webpage here .

这里还有相关的代码部分:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/coffee-script.js"></script>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/animtest/load_event.js"></script>
    <style>canvas { width: 100%; height: 100% }</style>
    <title></title>

</head>
<body>
<div id="animation"
    style="width: 1024px; height: 768px; ">

</div>
<script>
    $(function(){
       ctrl = new AnimController("#animation");
       ctrl.set_up_scene();
       ctrl.render();
       ctrl.display_frame(4);
    });
</script>

</body>
</html>

这是加载动画的 coffeescript 代码:

class AnimController

  ...

  set_up_scene: () ->
    @scene = new THREE.Scene()
    el = $(@element_name)
    @camera = new THREE.PerspectiveCamera(45
      el.width()/el.height(),
      1, 20000
    )
    @camera.position.set(100, 100, 0)
    @scene.add new THREE.AmbientLight 0x111111

    @renderer = new THREE.WebGLRenderer()
    el.html(@renderer.domElement)
    controls = new THREE.OrbitControls(@camera, @renderer.domElement );
    controls.addEventListener 'change', () =>
      console.log("Change")
      @render()

  render: () ->
    requestAnimationFrame(() => @render)
    console.log "Render"
    if @update_scene
      material = new THREE.MeshBasicMaterial() #"color": 0xffff00,
      geometry = new THREE.SphereGeometry 5, 50, 50
      console.log "Update"
      @update_scene = false
      @scene = new THREE.Scene()
      for particle in @curr_event
        p = particle['position']
        sphere = new THREE.Mesh( geometry, material );
        sphere.position.set(p[0], p[1], p[2])
        @scene.add(sphere)
    @renderer.render(@scene, @camera)

最佳答案

您似乎没有在您使用的渲染器上请求抗锯齿。我不知道 coffeescript 但在 javascript 中你会这样做:

 renderer = new THREE.WebGLRenderer({ antialias: true });

关于javascript - 渲染结果像素化(或 : has lower resolution that it should)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24855579/

javascriptresolutionscriptgt34three.jswebgl

有关javascript - 渲染结果像素化(或 : has lower resolution that it should)的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  4. 报告回顾丨模型进化狂飙，DetectGPT能否识别最新模型生成结果？ - 2

    导读语言模型给我们的生产生活带来了极大便利，但同时不少人也利用他们从事作弊工作。如何规避这些难辨真伪的文字所产生的负面影响也成为一大难题。在3月9日智源Live第33期活动「DetectGPT：判断文本是否为机器生成的工具」中，主讲人Eric为我们讲解了DetectGPT工作背后的思路——一种基于概率曲率检测的用于检测模型生成文本的工具，它可以帮助我们更好地分辨文章的来源和可信度，对保护信息真实、防止欺诈等方面具有重要意义。本次报告主要围绕其功能，实现和效果等展开。（文末点击“阅读原文”，查看活动回放。）Ericmitchell斯坦福大学计算机系四年级博士生，由ChelseaFinn和Chri

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 使用 header 渲染 JSON - 2

    我想在我的Controller中使用以下corsheader呈现JSON:'Access-Control-Allow-Origin'='*'.我试过这个:defmy_actionrender(json:some_params)response.headers['Access-Control-Allow-Origin']='*'end但是我得到了一个AbstractController::DoubleRenderError。有没有办法使用header呈现JSON？ 最佳答案 您不能在渲染后设置header，因为已发送响应。所以在没有意

  10. ruby - gem 推送结果为 "package metadata is missing" - 2

    我正在尝试将我更新的gem推送到ruby​​gems.com并得到以下结果。~/dev/V2/V2GPTI(master)$gembuildv2gpti.gemspecSuccessfullybuiltRubyGemName:v2gptiVersion:0.2File:v2gpti-0.2-universal-darwin-13.gem~/dev/V2/V2GPTI(master)$gempushv2gpti.gemspecERROR:Whileexecutinggem...(Gem::Package::FormatError)packagemetadataismissinginv2g

随机推荐