0

Sin añadir OrbitControls, sí que funciona, pero al añadir OrbitControls no se muestra ni el modelo 3d ¿Qué sucede?

app.js

//Variables for setup

let container;
let camera;
let renderer;
let scene;
let house;

function init() {

  container = document.querySelector(".scene");

  //Create scene
      scene = new THREE.Scene();

      const fov = 35;
      const aspect = container.clientWidth / container.clientHeight;
      const near = 0.5;
      const far = 1000;

  //Camera setup
      camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.set(0, 0.3, 3);

      const ambient = new THREE.AmbientLight(0x404040, 2);
      scene.add(ambient);

      const light = new THREE.DirectionalLight(0xffffff, 2);
      light.position.set(50, 50, 500);
      scene.add(light);

  //Renderer
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(container.clientWidth, container.clientHeight);
      renderer.setPixelRatio(window.devicePixelRatio);

      container.appendChild(renderer.domElement);


  
  //Load Model
    let loader = new THREE.GLTFLoader();
    loader.load('/media/3d/tubos/scene.gltf', function(gltf) {
        scene.add(gltf.scene);
        house = gltf.scene.children[0];
        animate();
    });
}


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




function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

init();

html:

<div class="scene"></div> 

<script src="/static/js/threejs/build/three.min.js"></script>
<script src="/static/js/threejs/examples/js/loaders/GLTFLoader.js"></script>
<script src="/static/js/threejs/examples/jsm/controls/OrbitControls"></script>
<script src="/static/js/app.js"></script>
1
  • Creo que tu problema es bastante sencillo, te falta la extensión /static/js/threejs/examples/jsm/controls/OrbitControls.js Commented el 26 ago. 2021 a las 6:53

1 respuesta 1

0

Crea OrbitControls dentro de la función init(), porque camera y renderer no tienen valor hasta que no se ejecuta init:

let controls;
function init(){
//todo lo que tienes
controls =  new 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.