Quiero hacer un configurador 3d de un producto, ya escribí la aplicación en ionic usando angular framework, ahora tengo que hacer el configurador usando three.js.

Intenté esto para probar tres.js dentro de una página, pero no funciona, todo lo que puedo ver es una pantalla negra mientras debería mostrar esto .

Este es el código que escribí para la página:

 <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>

y en la hoja CSS escribí esto:

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

¿Podría angular-tres ser útil en este proyecto?