I want to make a 3d configurator of a product, i already wrote the app in ionic using the angular framework, now i have to make the configurator using three.js.

I tried this to test three.js inside a page, but it does not work, all i can see is a black screen while it should display this.

This is the code i wrote for the page:

<ion-header>
  <ion-toolbar style="--ion-toolbar-background: #ee7554; --border-style: ios">
    <ion-buttons slot="start">
      <ion-back-button color=dark text="Indietro" icon="chevron-back-outline"></ion-back-button>
    </ion-buttons>
    <ion-title>Configuratore threejs</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <script src="https://threejs.org/build/three.js"></script>
  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    camera.position.z = 5;

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

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

      renderer.render(scene, camera);
    };

    animate();
  </script>
</ion-content>

and in the CSS sheet i wrote this:

body { margin: 0; }
canvas { width: 70%; height: 100% }

Could angular-three be useful in this project?