JSFiddle - React, Tailwind, and code Playground
CSS
body{
overflow: hidden;
margin: 0;
}
JavaScript
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls.js";
import {GUI} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/libs/dat.gui.module.js";
let scene = new THREE.Scene();
scene.background = new THREE.Color(0x7f7f7f);
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(8, 5, 13);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
let path = new THREE.Path();
path.absarc(5, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true);
path.absarc(-5, 0, 1, Math.PI * 1.5, Math.PI * 0.5, true);
path.closePath();
console.log(path)
let basePts = path.getSpacedPoints(200).reverse();
let g = new THREE.PlaneGeometry(1, 1, 200, 1);
basePts.forEach((p, idx) => {
g.attributes.position.setXYZ(idx, p.x, p.y, -2);
g.attributes.position.setXYZ(idx + 201, p.x, p.y, 2);
})
const m = loadLabel();
let band = new THREE.Mesh(g, m);
scene.add(band);
window.addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
})
renderer.setAnimationLoop( () => {
renderer.render(scene, camera);
});
function loadLabel (file) {
let m = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
color: 0xff0000
});
return m;
}
// GUI DE CONTROLE DEBUG
var gui = new GUI();
var options = {
width: () => {
console.log('pipii');
}
};
const labelFolder = gui.addFolder('Label properties')
...