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>
/static/js/threejs/examples/jsm/controls/OrbitControls.js