@AlexWD

Почему 3D модель не работает с AmbientLight?

Привет! Добавляю 3D модель в Three.js, но при включении AmbientLight модель не подсвечивается, как должна. В то время как другие 3D модели отлично работают.
То, что проблема в 3D модели мне уже стало понятно, но какой именно параметр в текстурах или вообще в приложении Blender я сломал, понять не могу.
Выглядит щас она так:
61823ff8ad6bb327871663.png
Код:
<!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/three@0.99.0/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 модели: Ссылка
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
@AlexWD Автор вопроса
На текстуре есть параметр "Зеркальность", если его выключить, проблема решается.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы