草庐IT

javascript - 在 Three.js 中设置 2D View

coder 2024-05-14 原文

我是 three.js 的新手，正在尝试使用这些 3D 工具设置相当于 2D 可视化(用于各种分层 Sprite )的内容。我想要一些关于 PerspectiveCamera() 参数和 camera.position.set() 参数的指导。我已经在从 this answer 到 related question 的正确方向上进行了轻推，这表示将 z 坐标设置为等于 0 中的 camera.position.set(x,y,z) 。

下面是我从 stemkoski's three.js examples 之一修改的代码片段。目前困扰我的部分是 VIEW_ANGLE 、 x 和 y 的值。假设我想在屏幕大小的平面上有一个平面相机 View ，我应该如何分配这些变量？我已经尝试了一系列值，但很难从可视化中看出发生了什么。提前致谢!

var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;   
var VIEW_ANGLE = ?, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
var x = ?, y = ?, z = 0;
camera.position.set(x,y,z);
camera.lookAt(scene.position);

更新 - 透视与正交相机:

谢谢@GuyGood，我意识到我需要对透视相机与正交相机进行设计选择。我现在看到 PerspectiveCamera() ，即使在这个 2D 上下文中也允许 parallax 之类的东西，而 OrthographicCamera() 将允许大小的文字渲染(不随距离减小)，无论我的 2D 元素在哪一层。我倾向于认为我仍然会使用 PerspectiveCamera() 来实现 Sprite 层之间的少量视差等效果(所以我猜我的项目不是纯 2D 的!)。

看来，主要的事情是让所有的 Sprite 层平行于视平面，camera.position.set() 是到视场中心的正交视线。这对于这里的很多人来说必须是基本的；这对我来说是一个全新的世界!

我想我仍然很难理解 VIEW_ANGLE 、 x 和 y 的作用以及在 2D 可视化中相机与远景和近景平面之间的距离。使用正交相机，这是非常不重要的 - 您只需要足够的深度来包含您想要的所有图层和适合您的 Sprite 比例的查看平面。然而，对于透视相机来说，深度和场的作用会影响视差的效果，但还有其他的考虑吗？

更新 2 - 视 Angular 和其他变量:

在探索如何考虑相机的视 Angular (视场，或 FOV)以及相机位置的 x、y、z 参数的更多工具之后，我遇到了这个有用的 video summary of the role of Field of View in game design(足够接近模拟来回答我的 2D 可视化问题)。除了这个 Field of View tutorial for photographers 我也发现它很有帮助(如果可能有点俗气；)，这两个资源帮助我了解如何为我的项目选择视野以及非常宽或窄的视野会发生什么(以 360 度中的度数来衡量)。最好的结果是混合了人类自然视野的感觉，这取决于屏幕或投影与他们脸部的距离，并且还与前景中事物与背景中事物的相对比例密切相关。可视化(更宽的视野使背景看起来更小，更窄的视野放大背景 - 类似于，但不像正交相机的效果那么明显)。我希望你觉得这和我一样有帮助!

更新 3 - 进一步阅读

如果您想了解有关各种用途的相机规范的更多详细信息，您可能会发现 Computer Graphics Principles and Practice 的第 13 章与我解决上述问题以及更多其他问题一样有用。

更新 4 - 正交相机中 z 维度的注意事项

当我继续我的项目时，我决定使用正交相机，这样我就可以增加我的 Sprite 的 z 尺寸以避免 z-fighting ，但不会让它们看起来逐渐后退到远处。相比之下，如果我想让它看起来好像一个 Sprite 正在向远处退去，我可以简单地调整它的大小。然而，今天我遇到了一个愚蠢的错误，我想指出它以拯救其他人免于同样的麻烦。尽管正交相机不会在物体更远时描绘后退尺寸，但请注意仍然存在 back frustrum plane 过去，物体将从 View 中剔除。今天，我不小心将我的几个对象的 z 值增加了超过该平面，但无法弄清楚为什么它们没有显示在屏幕上。在使用正交相机时，很容易忘记有关 z 坐标的这个因素。

最佳答案

你的目标是什么？如果不需要透视失真，请使用正交相机。
也只需检查文档:

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

视 Angular/视野是不言自明的，如果您不知道它是什么，请仔细阅读。

http://www.incgamers.com/wp-content/uploads/2013/05/6a0120a85dcdae970b0120a86d9495970b.png

关于 x y 和 z 值。嗯，这取决于你的飞机的大小和到相机的距离。您可以设置相机位置或平面位置并将相机保持在 (0,0,0)。
想象一下 3D 空间中的飞机。您可以根据飞机的大小计算相机的位置，或者只是通过尝试和错误...
要使用正交相机，请参阅此帖子:

Three.js - Orthographic camera

关于javascript - 在 Three.js 中设置 2D View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21786184/

中设javascriptcodenoreferrernofollowgraphicsthree.js2dperspectivecamera

有关javascript - 在 Three.js 中设置 2D View的更多相关文章

  1. Ruby 元类 : why three when defined singleton methods? - 2

    让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？ 最佳答案 查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define

  2. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  3. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

    了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

  4. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 如何在回形针 ruby​​ on rails 中设置默认图像 - 2

    最近我安装了Paperclipgem，我正在努力让默认图像在我的系统上工作，我将图像文件放在assets/images/pic.png中。这是我的模型User中的代码:has_attached_file:pic,:styles=>{:medium=>"300x300>",:thumb=>"100x100>"},:default_url=>'missing_:avatar.png'#:default_url=>'assets/images/avatar.png'has_attached_file:attach这是我的AddPicPaperClip迁移中的代码:defself.upadd_

  6. ruby-on-rails - Rails 中的类实例变量应该在互斥体中设置吗？ - 2

    假设我的Rails项目中有一个设置实例变量的Ruby类。classSomethingdefself.objects@objects||=begin#somelogicthatbuildsanarray,whichisultimatelystoredin@objectsendendend是否可以多次设置@objects？是否有可能在一个请求期间，在上面的begin/end之间执行代码时，可以在第二个请求期间调用此方法？我想这实际上归结为Rails服务器实例如何fork的问题。我应该改用Mutex还是线程同步？例如:classSomethingdefself.objectsreturn@o

  7. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  8. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  9. 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

  10. ruby-on-rails - 如何在 ActionController::TestCase 请求中设置内容类型 - 2

    我试图像这样在我的测试用例中执行获取:request.env['CONTENT_TYPE']='application/json'get:index,:application_name=>"Heka"虽然，它失败了:ActionView::MissingTemplate:Missingtemplatealarm_events/indexwith{:handlers=>[:builder,:haml,:erb,:rjs,:rhtml,:rxml],:locale=>[:en,:en],:formats=>[:html]尽管在我的Controller中我有:respond_to:html,

随机推荐