Hi, its my firts post and I searched about this in the forum but i didn’t find it.
I am making a test with BLENDER and THREE.JS and I think that this framework is great.
My problem is the next: When I try “play the animations” the windows browser broken, i upload my .glb in GLFTviewer and it´s all correct. My .js
'use strict';
//Reloj para animación,
const clock = new THREE.Clock();
//Creación de espacio contenedor,
const container = document.querySelector( '#containerscene' );
//Creación de escena,
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
scene.fog = new THREE.Fog( scene.background, 1, 5000 );
//Creación de cámara,
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set ( 3, 3, 3 );
//Creación de controles, orbitar, zoom, etc...
const controls = new THREE.OrbitControls( camera, container );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;
controls.keys = false;
controls.target = (new THREE.Vector3( 0, 1, 0 ));
controls.maxDistance = 2;
controls.minDistance = 1.5;
controls.minPolarAngle = 2/3;
controls.maxPolarAngle = 2;
controls.zoomSpeed = 0.2;
controls.mouseButtons = {
LEFT: THREE.MOUSE.LEFT,
MIDDLE: THREE.MOUSE.MIDDLE,
RIGHT: THREE.MOUSE.RIGHT = false
};
camera.position.set( 1.5, 2, 2);
//Creación de opciones de renderizado,
const renderer = new THREE.WebGLRenderer( {antialias:true, alpha:true} );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.gammaOutput = true;
renderer.gammaFactor = 2.5;
renderer.physicallyCorrectLights = true;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x333F47, 1 );
document.body.appendChild( renderer.domElement );
//Datos de rendimiento
const stats = new Stats();
container.appendChild( stats.dom );
//Datos de control DAT_GUI,
const statsdatgui = function() {
this.Autorotate = true;
};
window.onload = function () {
var text = new statsdatgui();
var gui = new dat.GUI();
const f1 = gui.addFolder('Camera');
f1.add(text, 'Autorotate').onChange(function(){controls.autoRotate = (text.Autorotate)});
};
//Creación de luces, en este caso 3 luces direccionales y 1 luz ambiente
let object3d = new THREE.DirectionalLight( 'white', 1.5 );
object3d.position.set( -3, 5, -5 );
object3d.name = 'Back light';
object3d.castShadow = true;
scene.add( object3d );
object3d = new THREE.DirectionalLight( 'white', 1.5 );
object3d.position.set( 0, 5, 0 );
object3d.castShadow = true;
object3d.name = 'Key light';
scene.add( object3d );
object3d = new THREE.DirectionalLight( 'white', 1.5 );
object3d.position.set( 3, 5, 5 );
object3d.castShadow = true;
object3d.name = 'Fill light';
scene.add( object3d );
//Carga de objeto GLTF,
const loader = new THREE.GLTFLoader();
loader.load( 'models/Cube.glb', function(gltf){
var mesh = gltf.scene.children[ 0 ];
var s = 0.3;
mesh.scale.set( s, s, s );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
/*var mixer = new THREE.AnimationMixer( mesh );
mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
mixers.push( mixer );*/
}
);
//Funcion Redimensionar al cambiar la ventana,
let onWindowResize = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize );
//Renderizado de la escena, y actualizacion de controladores,
let animate = function () {
requestAnimationFrame( animate );
render();
controls.update();
stats.update();
};
let render = function (){
/*var delta = clock.getDelta();
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( delta );
}*/
renderer.render (scene, camera);
}
//Inicio de las funciones,
onWindowResize();
animate();
thank for all.
. Seriously thank you