Witajcie.
Proszę powiedzcie mi, co robię źle.
Wszystko jest w porządku, ale plik GLB nie generuje cieni na scenie.
Jak to naprawićquestionmark.gif


[PHP] pobierz, plaintext 
  1. window.onload = function () {
  2.     var clock, mixer, camera, controls, scene, renderer, model, delta;
  3.  
  4.     var init = function () {
  5.  
  6.         if (!clock) {
  7.             clock = new THREE.Clock();
  8.         };
  9.  
  10.         if (mixer) {
  11.             mixer = null;
  12.         };
  13.  
  14.         if (renderer) {
  15.             renderer.dispose()
  16.         };
  17.  
  18.         if (scene) {
  19.             scene.dispose()
  20.         };
  21.  
  22.         scene = new THREE.Scene();
  23.         camera = new THREE.PerspectiveCamera(25, 500 / 500, 0.01, 10);
  24.         camera.position.set(-10, 15, 20);
  25.  
  26.         // var size = 2.5;
  27.         // var divisions = 15;
  28.  
  29.         // var gridHelper = new THREE.GridHelper(size, divisions);
  30.         // scene.add(gridHelper);
  31.  
  32.         renderer = new THREE.WebGLRenderer({
  33.             antialias: true,
  34.             alpha: true
  35.         });
  36.  
  37.         renderer.setPixelRatio(window.devicePixelRatio);
  38.         renderer.setSize(500, 500);
  39.  
  40.         container = document.createElement('div');
  41.         container.classList.add(`animation`);
  42.         document.body.append(container)
  43.         container.appendChild(renderer.domElement);
  44.  
  45.         window.addEventListener('resize', () => {
  46.             renderer.setSize(500, 500);
  47.             camera.aspect = 500 / 500;
  48.             camera.updateProjectionMatrix();
  49.         });
  50.  
  51.         controls = new THREE.OrbitControls(camera, renderer.domElement);
  52.         controls.addEventListener('change', function () {
  53.             render;
  54.         });
  55.  
  56.         var GLBFile = 'hero.glb';
  57.  
  58.         var loader = new THREE.GLTFLoader();
  59.         loader.load(GLBFile, async (gltf) => {
  60.                 model = gltf.scene;
  61.                 gltf.scene.traverse(function (node) {
  62.                     if (node.isMesh || node.isLight) node.castShadow = true;
  63.                     if (node.isMesh || node.isLight) node.receiveShadow = true;
  64.                 });
  65.  
  66.                 gltf.animations;
  67.                 gltf.castShadow = true;
  68.                 gltf.receiveShadow = true;
  69.                 gltf.scenes;
  70.                 gltf.cameras;
  71.                 gltf.asset;
  72.                 mixer = new THREE.AnimationMixer(gltf.scene);
  73.                 var action = mixer.clipAction(gltf.animations[0]);
  74.                 action.play();
  75.                 scene.add(model);
  76.                 animate();
  77.  
  78.             },
  79.             function (xhr) {
  80.                 console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  81.             },
  82.             function (error) {
  83.                 console.log('An error happened');
  84.             });
  85.  
  86.         var light = new THREE.PointLight(0xffffff, 11, 0);
  87.         light.position.set(-1, 10, 10);
  88.         scene.add(light);
  89.  
  90.         light.shadow.mapSize.width = 512; // default
  91.         light.shadow.mapSize.height = 512; // default
  92.         light.shadow.camera.near = 0.15; // default
  93.         light.shadow.camera.far = 0.15 // default
  94.         controls.enableDamping = false; // an animation loop is required when either damping or auto-rotation are enabled
  95.         controls.dampingFactor = 10.5;
  96.         controls.screenSpacePanning = false;
  97.         controls.maxDistance = 0.15;
  98.         controls.minDistance = 0.15;
  99.         controls.maxPolarAngle = Math.PI / 2;
  100.         controls.addEventListener('change', light_update);
  101.  
  102.         function light_update() {
  103.             light.position.copy(camera.position);
  104.         }
  105.  
  106.         window.addEventListener('resize', onWindowResize, false);
  107.  
  108.         function onWindowResize() {
  109.             camera.aspect = window.innerWidth / window.innerHeight;
  110.             camera.updateProjectionMatrix();
  111.             renderer.setSize(window.innerWidth, window.innerHeight);
  112.         }
  113.  
  114.         function animate() {
  115.             delta = clock.getDelta();
  116.             if (mixer) mixer.update(delta);
  117.             requestAnimationFrame(animate);
  118.             controls.update();
  119.             render();
  120.         }
  121.  
  122.         function render() {
  123.             renderer.render(scene, camera);
  124.         }
  125.  
  126.         controls.target.set(0, 0.02, 0);
  127.         controls.update();
  128.  
  129.     };
  130.     init();
  131. }
[PHP] pobierz, plaintext