Databases
StackOverflow2013
Postsdbo
POHow to make a flat ring in Three.js?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a flat ring in Three.js?
    primarykey
    data
    text
    <p>I was able to make a donut with Three.js using THREE.TorusGeometry. But I can't get it to look like a flat ring like the ones in these pictures:</p> <p><a href="http://www.google.com/imgres?imgurl=http://www.titanjewellery.co.uk/Mens/TI21-Titanium-8mm-Flat-Brushed-Ring.jpg&amp;imgrefurl=http://www.titanjewellery.co.uk/Mens/8mm-Brushed-Titanium-Flat-Ring.html&amp;h=301&amp;w=232&amp;sz=16&amp;tbnid=LCN7eQuo2wyG_M:&amp;tbnh=90&amp;tbnw=69&amp;zoom=1&amp;usg=__3vayMvDy26tsj2hwvCK9SsYwVwY=&amp;docid=ZMdcBBBQOzMSoM&amp;sa=X&amp;ei=pEhsUeL4FKWJiAKCzIHYCQ&amp;ved=0CEAQ9QEwBA&amp;dur=1660" rel="nofollow noreferrer">http://www.google.com/imgres?imgurl=http://www.titanjewellery.co.uk/Mens/TI21-Titanium-8mm-Flat-Brushed-Ring.jpg&amp;imgrefurl=http://www.titanjewellery.co.uk/Mens/8mm-Brushed-Titanium-Flat-Ring.html&amp;h=301&amp;w=232&amp;sz=16&amp;tbnid=LCN7eQuo2wyG_M:&amp;tbnh=90&amp;tbnw=69&amp;zoom=1&amp;usg=__3vayMvDy26tsj2hwvCK9SsYwVwY=&amp;docid=ZMdcBBBQOzMSoM&amp;sa=X&amp;ei=pEhsUeL4FKWJiAKCzIHYCQ&amp;ved=0CEAQ9QEwBA&amp;dur=1660</a></p> <p>Here's what my donut looks like: <img src="https://i.stack.imgur.com/tMwdU.png" alt="enter image description here"></p> <p>Is there another Three.js geometry that can generate a flat ring (right with flat inner and outer walls)? Or another way of going about this?</p> <p>Thanks for any pointers you can share! :)</p> <p>Update: The code and dependencies were taken from:</p> <p><a href="http://mrdoob.github.io/three.js/examples/misc_controls_trackball.html" rel="nofollow noreferrer">http://mrdoob.github.io/three.js/examples/misc_controls_trackball.html</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;three.js webgl - trackball controls&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt; &lt;style&gt; body { color: #000; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; background-color: #fff; margin: 0px; overflow: hidden; } #info { color:#000; position: absolute; top: 0px; width: 100%; padding: 5px; } a { color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;div id="info"&gt; &lt;a href="http://threejs.org" target="_blank"&gt;three.js&lt;/a&gt; - trackball controls example&lt;/br&gt;MOVE mouse &amp;amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan &lt;/div&gt; &lt;script src="three.min.js"&gt;&lt;/script&gt; &lt;script src="TrackballControls.js"&gt;&lt;/script&gt; &lt;script src="Detector.js"&gt;&lt;/script&gt; &lt;script src="stats.min.js"&gt;&lt;/script&gt; &lt;script&gt; if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, controls, scene, renderer; var cross; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 500; controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addEventListener( 'change', render ); // world scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 ); var radius = 100; var tubeRadius = 50; var radialSegments = 8 * 10; var tubularSegments = 6 * 15; var arc = Math.PI * 2; var geometry = new THREE.TorusGeometry( radius, tubeRadius, radialSegments, tubularSegments, arc ); var material = new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } ); for ( var i = 0; i &lt; 1; i ++ ) { var mesh = new THREE.Mesh( geometry, material ); mesh.updateMatrix(); mesh.matrixAutoUpdate = false; scene.add( mesh ); } // lights light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 1, 1, 1 ); scene.add( light ); light = new THREE.DirectionalLight( 0x002288 ); light.position.set( -1, -1, -1 ); scene.add( light ); light = new THREE.AmbientLight( 0x222222 ); scene.add( light ); // renderer renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setClearColor( scene.fog.color, 1 ); renderer.setSize( window.innerWidth, window.innerHeight ); container = document.getElementById( 'container' ); container.appendChild( renderer.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); controls.handleResize(); render(); } function animate() { requestAnimationFrame( animate ); controls.update(); } function render() { renderer.render( scene, camera ); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><a href="http://jsfiddle.net/alininja/b4qGx/1/" rel="nofollow noreferrer">http://jsfiddle.net/alininja/b4qGx/1/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USA L
    1. USA L
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COShow us your code.
      singulars
      1. POHow to make a flat ring in Three.js?
      1. USRobert Harvey
    2. CO@RobertHarvey: I've updated the question with the code and JSFiddle. Thanks for looking!
      singulars
      1. POHow to make a flat ring in Three.js?
      1. USA L
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload