I'm struggling to achieve perfect ring geometry in three.js, similar to the image here:
https://i.sstatic.net/ArxKa.png
After spending over a day troubleshooting, my code currently looks 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();
UPDATE:
Now, my updated code looks like this:
var container, stats;
var camera, scene, renderer;
var group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// Code for initializing scene, camera, lights, and 3D shapes...
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
The end result is seen here:
https://i.sstatic.net/uKkke.png
Now, I'm facing some challenges: How can I remove the line on the ring, enhance its shine, and make it look more symmetrical on the left and right sides?