mardi 30 août 2016

How to create perfect ring geometry in three.js?

I need to create perfect ring geometry in three.js. I am looking for something like this:

ring image

I spend more than a day to find how to do this, and I am stuck with code like this:

var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        var controls = new THREE.OrbitControls( camera, renderer.domElement );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        ring = '';
        var loader = new THREE.TextureLoader();
        loader.load('img/water.jpg', function ( texture ) {
            var geometry = new THREE.TorusGeometry( 5, 1, 8, 1900 );
            ring = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture, wireframe: true}));
            scene.add(ring);
        });

        camera.position.z = 20;

        var render = function () {
            requestAnimationFrame( render );
            ring.rotation.y = 0.4;

            renderer.render(scene,camera);
        };

        render();




Aucun commentaire:

Enregistrer un commentaire