java
/
jMonkeyEngine-wiki
mirror of https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Shapes :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/jme3/advanced/shape.html">
    <meta name="keywords" content="spatial, node, mesh, geometry, scenegraph">
    <meta name="generator" content="Antora 2.3.3">
    <link rel="stylesheet" href="../../../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="Shapes">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../../../_/css/site-extra.css">
<link rel="stylesheet" href="../../../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../../../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../../../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="docs" data-version="master">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="../../documentation.html">Docs</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../documentation.html">Getting Started</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.3.2-stable">JavaDoc</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../jme3.html">jMonkeyEngine 3</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Beginner Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_node.html">Hello Node</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_asset.html">Hello Asset</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_main_event_loop.html">Hello Main Event Loop</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_input_system.html">Hello Input System</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_material.html">Hello Material</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_animation.html">Hello Animation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_picking.html">Hello Picking</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_collision.html">Hello Collision</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_terrain.html">Hello Terrain</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_audio.html">Hello Audio</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_effects.html">Hello Effects</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../beginner/hello_physics.html">Hello Physics</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Intermediate Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Concepts</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/simpleapplication.html">Simple Application</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../features.html">Features</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/optimization.html">Optimization</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../faq.html">FAQ</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Math Concepts</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../math_for_dummies.html">Math For Dummies</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/math.html">Math</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../math.html">More Math</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../rotate.html">Rotate</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../math_video_tutorials.html">Math Video Tutorials</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">3D Graphics Concepts</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../scenegraph_for_dummies.html">Scenegraph for Dummies</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../beginner/hellovector.html">Hello Vector</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../terminology.html">Terminology</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/how_to_use_materials.html">How to Use Materials</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../intermediate/transparency_sorting.html">Transparency and Sorting</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../external/blender.html">Importing from Blender</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../external/3dsmax.html">Importing from 3DS Max</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../logo.html">Logo Usage</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../bsd_license.html">License</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../github_tips.html">Github Tips</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">SDK</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../sdk.html">jMonkeyEngine SDK</a>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Docs</span>
    <span class="version">master</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <span class="title">Docs</span>
      <ul class="versions">
        <li class="version is-current is-latest">
          <a href="../../documentation.html">master</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-latest">
          <a href="../../../wiki-ui/index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="../../documentation.html">Docs</a></li>
    <li><a href="shape.html">Shapes</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/ROOT/pages/jme3/advanced/shape.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Shapes</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>The simplest type of Meshes are the built-in JME Shapes. You can create Shapes without using the AssetManager.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="3d-shapes"><a class="anchor" href="#3d-shapes"></a>3D shapes</h2>
<div class="sectionbody">
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/box.png" alt="box.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Box – A cube or cuboid. Single-sided Quad faces (outside only).</p>
</li>
<li>
<p>com.jme3.scene.shape.StripBox – A cube or cuboid. Solid filled faces (inside and outside).</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/cylinder.png" alt="cylinder.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Cylinder – A disk or pillar.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/sphere.png" alt="sphere.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Sphere – A ball or elipsoid.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/dome.png" alt="dome.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Dome – A semi-sphere, e.g. SkyDome.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/cone.png" alt="cone.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>For a cone, set the Dome&#8217;s radialSamples&gt;4 and planes=2.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/pyramid.png" alt="pyramid.png" width="108" height="">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>For a pyramid, set the Dome&#8217;s radialSamples=4 and planes=2.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="http://i204.photobucket.com/albums/bb19/mike_ch_1/torus.png" alt="Torus" width="108" height="80">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Torus – An single-holed torus or “donut.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/220px-trefoil_knot_arb.png" alt="PQ torus knoz" width="108" height="80">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.PQTorus – A parameterized torus. A PQ-Torus looks like a <a href="http://en.wikipedia.org/wiki/Torus_knot">donut knotted into spirals</a>.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right text-left">
<div class="content">
<img src="../../_images/jme3/advanced/nurbs_3-d_surface.png" alt="NURBS surface" width="108" height="80">
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Surface – A curved surface (called <a href="http://en.wikipedia.org/wiki/File:NURBS_3-D_surface.gif">NURBS</a>) described by knots, weights and control points. Compare with shape.Curve.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="non-3d-shapes"><a class="anchor" href="#non-3d-shapes"></a>Non-3D shapes</h2>
<div class="sectionbody">
<div class="ulist">
<ul>
<li>
<p>com.jme3.scene.shape.Quad – A flat 2D rectangle (single-sided, center is in bottom-left corner)</p>
</li>
<li>
<p>com.jme3.scene.shape.Line – A straight 1D line defined by a start and end point.</p>
</li>
<li>
<p>com.jme3.scene.shape.Curve – A curved 1D spline. Compare with shape.Surface.</p>
</li>
</ul>
</div>
<div class="sect2">
<h3 id="com-jme3-math-versus-com-jme3-shape"><a class="anchor" href="#com-jme3-math-versus-com-jme3-shape"></a>com.jme3.math versus com.jme3.shape?</h3>
<div class="paragraph">
<p>Do not mix up these visible com.jme3.shapes with similarly named classes from the com.jme3.math package. Choose the right package when letting your IDE fill in the import statements!</p>
</div>
<div class="ulist">
<ul>
<li>
<p>com.jme3.math.Line – is invisible, has a direction, goes through a point, infinite length.</p>
</li>
<li>
<p>com.jme3.math.Ray – is invisible, has a direction and start point, but no end.</p>
</li>
<li>
<p>com.jme3.math.Spline – is an invisible curve.</p>
</li>
<li>
<p>etc</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>These maths objects are invisible and are used for collision testing (ray casting) or to describe motion paths. They cannot be wrapped into a Geometry.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="usage"><a class="anchor" href="#usage"></a>Usage</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="basic-usage"><a class="anchor" href="#basic-usage"></a>Basic Usage</h3>
<div class="paragraph">
<p>To add a shape to the scene:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create the base mesh shape.</p>
</li>
<li>
<p>Wrap the mesh into a Geometry.</p>
</li>
<li>
<p>Assign a Material to the Geometry.</p>
</li>
<li>
<p>Attach the Geometry to the rootNode to make it visible.</p>
</li>
</ol>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Create one static shape as mesh and use it in several geometries, or clone() the geometries.</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="complex-shapes"><a class="anchor" href="#complex-shapes"></a>Complex Shapes</h3>
<div class="paragraph">
<p>You can compose more complex custom Geometries out of simple Shapes. Think of the buildings in games like Angry Birds, or the building blocks in Second Life (“prims) and in Tetris (“Tetrominos).</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create a Node. By default it is located at the origin (0/0/0) – leave the Node there for now.</p>
</li>
<li>
<p>Create your shapes and wrap each into a Geometry, as just described.</p>
</li>
<li>
<p>Attach each Geometry to the Node.</p>
</li>
<li>
<p>Arrange the Geometries around the Node (using <code>setLocalTranslation()</code>) so that the Node is in the center of the new constellation. The central Node is the pivot point for transformations (move/scale/rotate).</p>
</li>
<li>
<p>Move the pivot Node to its final location in the scene. Moving the pivot Node moves the attached constellation of Geometries with it.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The order is important: First arrange around origin, then transform. Otherwise, transformations are applied around the wrong center (pivot). Of course, you can attach your constellation to other pivot Nodes to create even more complex shapes (a chair, a furnished room, a house, a city, …), but again, arrange them around the origin first before you transform them. Obviously, such composed Geometries are simpler than hand-sculpted meshes from a mesh editor.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="code-examples"><a class="anchor" href="#code-examples"></a>Code Examples</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Create the Mesh shape:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Sphere mesh = new Sphere(32, 32, 10, false, true);</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Dome mesh = new Dome(Vector3f.ZERO, 2, 4, 1f,false); // Pyramid</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Dome mesh = new Dome(Vector3f.ZERO, 2, 32, 1f,false); // Cone</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Dome mesh = new Dome(Vector3f.ZERO, 32, 32, 1f,false); // Small hemisphere</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Dome mesh = new Dome(Vector3f.ZERO, 32, 32, 1000f,true); // SkyDome</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">PQTorus mesh = new PQTorus(5,3, 2f, 1f, 32, 32); // Spiral torus</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">PQTorus mesh = new PQTorus(3,8, 2f, 1f, 32, 32); // Flower torus</code></pre>
</div>
</div>
<div class="paragraph">
<p>Use one of the above examples together with the following geometry in a scene:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Geometry geom = new Geometry("A shape", mesh); // wrap shape into geometry
Material mat = new Material(assetManager,
    "Common/MatDefs/Misc/ShowNormals.j3md");   // create material
geom.setMaterial(mat);                         // assign material to geometry
// if you want, transform (move, rotate, scale) the geometry.
rootNode.attachChild(geom);                    // attach geometry to a node</code></pre>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="see-also"><a class="anchor" href="#see-also"></a>See also</h2>
<div class="sectionbody">
<div class="ulist">
<ul>
<li>
<p><a href="../intermediate/optimization.html" class="page">Optimization</a> – The GeometryBatchFactory class combines several of your shapes with the same texture into one mesh with one texture.</p>
</li>
</ul>
</div>
</div>
</div>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../../../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../../../_/js/site.js"></script>
<script async src="../../../_/js/vendor/highlight.js"></script>
  </body>
</html>