Задать вопрос
@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 модели: Ссылка
  • Вопрос задан
  • 91 просмотр
Подписаться 2 Сложный Комментировать
Решения вопроса 1
@AlexWD Автор вопроса
На текстуре есть параметр "Зеркальность", если его выключить, проблема решается.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы