我在 Three.js 中添加了 3D 模型，但是当我打开 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03776b71666643332d3a3a2d33" rel="noreferrer noopener nofollow">[email protected]</a>/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 模型的链接:Click
最佳答案
您 Assets 的所有 Material 的金属度值为1。环境光不会影响金属表面。
考虑到您的 Assets (属性)的类型，当前的 Material 参数化没有意义。并不是房子里的所有东西都是金属的。
由于您现在没有使用环境贴图，因此您应该将 metalness 属性设置为 0。
关于three.js - 为什么 3D 模型不能与 AmbientLight 配合使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69821345/