0

Добавляю 3D модель в Three.js, но при включении AmbientLight модель не подсвечивается, как должна. В то время как другие 3D модели отлично работают. То, что проблема в 3D модели мне уже стало понятно, но какой именно параметр в текстурах или вообще в приложении Blender я сломал, понять не могу. Выглядит щас она так: введите сюда описание изображения

Код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>3D Model</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="container-model">
        <canvas id="myCanvas"></canvas>
    </div>

    <script src="js/three.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>

    <script>
        var renderer,
        scene,
        camera,
        myCanvas = document.getElementById('myCanvas');

        //RENDERER
        renderer = new THREE.WebGLRenderer({
          canvas: myCanvas,
          antialias: true,
          alpha: true
        });
        renderer.setClearColor(0x000000, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth-50, window.innerHeight-50);

        //CAMERA
        camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.set(-45, 5, 45);

        var controls = new THREE.OrbitControls(camera, myCanvas);

        controls.enableDamping = true;
        controls.target.set(0, 1, 0);
        controls.minPolarAngle = Math.PI / 3;
        controls.maxPolarAngle = Math.PI / 2;
        controls.enablePan = false;
        controls.enableZoom = false;
        
        //SCENE
        scene = new THREE.Scene();

        //LIGHTS
        var light = new THREE.AmbientLight(0x404040, 2);
        scene.add(light);

        // var light2 = new THREE.DirectionalLight(0xfffde1, 3);
        // light2.position.set(15, 7, 30);
        // light2.target.position.set(0, 0, 0);
        // scene.add(light2);
        // scene.add(light2.target);

        // const helper = new THREE.DirectionalLightHelper(light2);
        // scene.add(helper);


        // LOADER
        var gltfLoader = new THREE.GLTFLoader();
        var clock = new THREE.Clock();

        let mixer;

        gltfLoader.load( "model/scene.gltf", model =>  {
            console.log("Содержимое модели: ", model);
            mixer = new THREE.AnimationMixer(model.scene);
            const clips = model.animations;
            console.log("Список аннимаций: ", clips); // --> Анимации у модели

            const clip = THREE.AnimationClip.findByName( clips, 'mixamo.com' );
            const action = mixer.clipAction( clip );

            scene.add(model.scene);
        });

        //RENDER
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
            if ( mixer ) mixer.update( clock.getDelta() );
        }
        animate();
    </script>
</body>
</html>

Ссылка на скачивание 3D модели: Ссылка

4
  • Модель не качал. Нормали есть, валидные, какой-нить серой текстурой нормалей не перебиты?
    – Kromster
    3 ноя 2021 в 8:06
  • @Kromster Поверх текстуры не вешал, не должно быть таких проблем. Я упрощал текстуру, удалял отражения и т.п., и после этого произошла такая проблема. А исходник, увы, я затёр...
    – Alexandr
    3 ноя 2021 в 8:12
  • Вероятно что-то удалили, что теперь сделалось "по-умолчанию"
    – Kromster
    3 ноя 2021 в 8:14
  • @Kromster На текстуре есть параметр "Зеркальность", если его выключить, проблема решается.
    – Alexandr
    3 ноя 2021 в 8:27

1 ответ 1

0

На текстуре есть параметр "Зеркальность", если его выключить, проблема решается.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.