How can I integrate three.js library

I am trying to use the three.js library in vaadin 14. But i can’t find a proper example of how to do this. I have downloaded the minified version of three.js.
But i am stuck as to how to continue onwards. Should i try build a webcomponent within vaadin using the javascript library? it is quite unclear at the moment as to how to do this.
Any help would be very much appreciated.

According to the documentation of three.js:

Download the minified library and include it in your HTML, or install and import it as a module, Alternatively, see how to build the library yourself.

<script src="js/three.min.js"></script>

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

var camera, scene, renderer;
var geometry, material, mesh;
function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;
    scene = new THREE.Scene();
    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );


I created an example here

Basically what you need is:

In Java:

  1. Define that you want to use the three.js npm package:
  2. Create a Java component class which creates a <canvas> element for Three.js:
  3. Add a JS module which imports and uses three.js:
  4. Call an JS init function when a component instance is created:

In the JS module:

  1. import the Three JS library:
  2. define a global function that the Java component calls
  3. in the init function, create something that is not global (wrapped in a JS class here to make variables local to the instance) and do whatever you want with three.js

Based on this, it should be possible to add more Java API which configures three.js the way you want.

I published the end result here

you have no idea how much i appreciate your help. i will dive into it. thank you very much. My goal is the implement the editor. You example is perfect. it gives my a good base to continue onward.