Question

我能够使用THREE.TorusGeometry制作一个带有Three.js的甜甜圈。但我不能让它看起来像这些照片中的扁平环：

http://www.google.com/imgres?imgurl=http://www.titanjewellery.co.uk/Mens/TI21-Titanium-8mm-Flat-Brushed-Ring.jpg&imgrefurl=http://www.titanjewellery.co.uk/Mens/8mm-Brushed-Titanium-Flat-Ring.html&h=301&w=232&sz=16&tbnid=LCN7eQuo2wyG_M:&tbnh=90&tbnw=69&zoom=1&usg=__3vayMvDy26tsj2hwvCK9SsYwVwY=&docid=ZMdcBBBQOzMSoM&sa=X&ei=pEhsUeL4FKWJiAKCzIHYCQ&ved=0CEAQ9QEwBA&dur=1660

这是我的甜甜圈的样子： enter image description here

是否有另一个Three.js几何体可以产生扁平环（右侧内壁和外壁平坦）？或另一种方式来解决这个问题？

感谢您分享的任何指示！：）

更新：代码和依赖项取自：

http://mrdoob.github.io/three.js/examples/misc_controls_trackball.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - trackball controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="info">
      <a href="http://threejs.org" target="_blank">three.js</a> - trackball controls example</br>MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
    </div>

    <script src="three.min.js"></script>
    <script src="TrackballControls.js"></script>
    <script src="Detector.js"></script>
    <script src="stats.min.js"></script>
    <script>
      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 < 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 );
      }
    </script>
  </body>
</html>

http://jsfiddle.net/alininja/b4qGx/1/

Answer 1

有多种选择：

使用TubeGeometry - 这可能就是您所需要的
ExtrudeGeometry挤出磁盘
使用LatheGeometry
使用THREE.Shape - ＆gt;从webgl_geometry_shapes sample

Answer 2

您可以使用RingGeometry函数。以下代码为场景添加了一个完整的（在0到360度之间）内部半径的线框红色环等于10，外部无线电等于20.您可以使用其他指示的变量来调整您想要的光盘的外观generate（）

var geometry = new THREE.RingGeometry(10, 20, thetaSegments, phiSegments, 0, Math.PI * 2);
var ring = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}));
ring.position.set(25, 30, 0);
scene.add(ring);

Answer 3

检查此代码！

var geometry = new THREE.TorusGeometry( 3, 0.5, 20, 2999 );
  ring1 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true}));
scene.add(ring1);

如何在Three.js制作扁平环？

3 个答案: