JSFiddle - React, Tailwind, and code Playground

by mqdevWG

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://files.wnology.io/5fd77c0d33491f0006da9de8/script/chart.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="{{file 'script/chart.js'}}"></script>

<div id="container">
    <canvas id="c" style="width: 100%; height: 100%"></canvas>
    </div>

CSS

body { margin: 0; }

JavaScript

const labels = [
     'January',
     'February',
     'March',
     'Febru',
     'May',
     'June',
 ];
 const data = {
     labels: labels,
     datasets: [{
         label: 'My First dataset',
         backgroundColor: 'rgb(255, 255, 255)',
         borderColor: 'rgb(0, 0, 0)',
         data: [0, 10, 5, 2, 20, 30, 45],
     }]
 };
 const config = {
     type: 'line',
     data: data,
 };

 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0xFFFFFF);
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const canvas = document.querySelector('#c');            // Obtém o canvas através de seu id para futuras utilizações
    const renderer = new THREE.WebGLRenderer({ canvas });
 renderer.setSize(window.innerWidth, window.innerHeight);

 const geometry = new THREE.BoxGeometry(1, 1, 1);
 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 const cube = new THREE.Mesh(geometry, material);
 scene.add(cube);

 var cnv = document.createElement('canvas');
 $( "#container" ).append(cnv)

 var myChart = new Chart(
     cnv,
     config
 );

 var texture = new THREE.Texture(cnv);
 texture.needsUpdate = true;

 var spriteMaterial = new THREE.SpriteMaterial({ map: texture, color: 0xffffff });
 spriteMaterial.color.set(0xffffff)

 var sprite = new THREE.Sprite(spriteMaterial);


 sprite.position.set(cube.position.x, cube.position.y + 5, cube.position.z);

 //renderer.copyTextureToTexture( [0,0], colorTexture, texture );


 cube.add(sprite)
cnv.style.display = 'none'
 camera.position.z = 5;

 const animate = function() {
     requestAnimationFrame(animate);

     cube.rotation.x += 0.01;
     cube.rotation.y += 0.01;

     renderer.render(scene, camera);
 };

 animate();