Создание сложных веб-приложений

THREE.BufferGeometry.prototype.setAttribute=THREE.BufferGeometry.prototype.addAttribute; 
let scene = new THREE.Scene(); 
let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000); 
camera.position.set(0,15,15); 
let renderer = new THREE.WebGLRenderer(); 
renderer.setSize(innerWidth, innerHeight); 
document.body.appendChild(renderer.domElement); 
 
addEventListener('resize', () => { 
  camera.aspect = innerWidth / innerHeight; 
  camera.updateProjectionMatrix(); 
  renderer.setSize(innerWidth, innerHeight); 
}); 
 
let controls = new THREE.OrbitControls(camera, renderer.domElement); 
let material = new THREE.MeshNormalMaterial(); 
add(new THREE.BoxGeometry( 2, 2, 2 ), -2); 
add(new THREE.SphereGeometry( 1, 32, 32), 2 ); 
scene.add(new THREE.GridHelper(50, 10, 0x666666, 0x444444)); 
 
function render() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
} 
 
function add(geometry, dx) { 
  let mesh = new THREE.Mesh(new THREE.BoxGeometry( 2, 2, 2 ), material); 
  mesh.position.x = dx; 
  scene.add(mesh); 
  let control = new THREE.TransformControls(camera, renderer.domElement); 
  control.addEventListener('dragging-changed', e => controls.enabled = !e.value); 
  scene.add(control); 
  control.attach(mesh); 
} 
 
render();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script> 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
<script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>