JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/utils/BufferGeometryUtils.js"></script>
JavaScript
var camera, scene, renderer;
var frustumSize = 6.0;
var radius = 2.0;
var segements = 256;
var ringWidth = 0.05;
var circleGeometry = new THREE.CircleBufferGeometry( radius, segements );
var ringGeometry = new THREE.RingBufferGeometry( radius, radius + ringWidth, segements );
var cellGeometry = null;
init();
animate();
function init() {
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0, 2000 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var loader = new THREE.TextureLoader();
loader.load( 'https://i.imgur.com/JtF9F5q.png', function ( texture ) {
var circleMaterial = new THREE.MeshBasicMaterial( {
map: texture,
depthTest: false
} );
var ringMaterial = new THREE.MeshBasicMaterial( {
color: 0x000000,
depthTest: false
} );
cellGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries( [ circleGeometry, ringGeometry ], true );
var group1 = new THREE.Group();
group1.renderOrder = 1;
var mesh1 = new THREE.Mesh( cellGeometry, [ circleMaterial, ringMaterial ] );
group1.add( mesh1 );
scene.add( group1 );
var group2 = new THREE.Group();
group2.renderOrder = 2;
group2.add( new THREE.Mesh( circleGeometry, circleMaterial ) );
group2.add( new THREE.Mesh( ringGeometry, ringMaterial ) );
group2.position.x += 2;
group2.position.z = - 0.01
scene.add( group2 );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.append( renderer.domElement );
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
}