Estoy empezando con three.js. He conseguido que su ejemplo mínimo funcione correctamente, y ahora quiero añadir un movimiento a la cámara.
Para ello, el propio three.js proporciona un plugin/ejemplo en examples/js/controls/OrbitControls.js
. Sin embargo, estoy teniendo problemas para usarlo.
Examinando su código, creo que un destilado del problema se resume así:
class Padre { };
const Namespace = { Padre: Padre };
( function( ) {
class Hijo extends Namespace.Padre { }
} )( );
const hijo = Hijo( );
Esto, probado en node.js, muestra un bonito error:
ReferenceError:
Hijo
is not defined
Lo cual es coherente con el error que obtengo en el navegador:
Uncaught ReferenceError:
OrbitControls
is not defined
El código real que estoy usando (de momento, un html
que abro en local mediante file:///ruta
) es:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Three.js</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
</body>
<script src='node_modules/three/build/three.js'></script>
<script src='node_modules/three/examples/js/controls/OrbitControls.js'></script>
<script>
const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
const geometry = new THREE.BoxGeometry( );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate( ) {
requestAnimationFrame( animate );
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
renderer.render( scene, camera );
};
animate( );
</script>
</html>
- ¿ Que estoy haciendo mal ?
- ¿ Cómo lo soluciono ?