1

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 ?
1
  • ¿Que esperas exactamente? La definición de la clase Hijo la tienes dentro de una función, por lo que su scope va a ser solo dentro de esa función. Fuera de esa función la clase Hijo no existe. El error es bastante claro.
    – Jaime
    Commented el 30 oct. 2021 a las 22:28

2 respuestas 2

0

Tu problema es que no estás importando correctamente OrbitControls. Te adjunto un ejemplo con la sentencia import que puedes ejecutar desde acá desde SO:

<script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';

    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>

0

Basta con mirar TODO el código de OrbitControls.js. Las últimas líneas del archivo son:

THREE.MapControls = MapControls;
THREE.OrbitControls = OrbitControls;

El módulo se auto-añade el namespace THREE. Con lo que la solución es, simplemente, usar el nombre totalmente cualificado de la clase:

const controls = new THREE.OrbitControls( camera, renderer.domElement );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.