JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>
CSS
body {
margin: 0;
}
canvas {
display: block;
}
JavaScript
let camera, scene, renderer;
init();
render();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(15, 0, 25);
scene = new THREE.Scene();
scene.add( new THREE.AxesHelper( 100 ) );
const points = [];
const samplings = 50;
const distance = 30;
const λ = 0.1;
const ω = 2;
const φ = 0;
const A = 2;
for (let i = 0; i < samplings; i++) {
const t = (i / samplings) * distance;
const s = A * Math.exp(-λ * t) * Math.sin(ω * t + φ);
points.push(new THREE.Vector3(t, s, 0));
}
const spline = new THREE.SplineCurve(points);
// render spline curve
const geometry = new THREE.BufferGeometry().setFromPoints(spline.getPoints(200));
const material = new THREE.LineBasicMaterial();
const line = new THREE.Line(geometry, material);
scene.add(line);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function render() {
renderer.render(scene, camera);
}