大家好，我遇到了一個奇怪的問題，就是我在three.js中加載了一個gltf模型并為它設定了顏色。放大時有顏色，但縮小時全黑。而我直接設定顏色時因為它的材料，它可以很好地作業。謝謝你。
這是示例 sreenphotos 和代碼。
loadGlbModel() {
const loader = new GLTFLoader();
loader.load(
`/three/eiffel-tower.gltf`,
(gltf) => {
const geometry = gltf.scene.children[0].geometry;
const positions = geometry.attributes.position;
const count = positions.count;
geometry.setAttribute(
"color",
new THREE.BufferAttribute(new Float32Array(count * 3), 3)
);
const color = new THREE.Color();
const colors = geometry.attributes.color;
const radius = 200;
debugger;
for (let i = 0; i < count; i ) {
color.setHSL(positions.getY(i) / radius / 2, 1.0, 0.5);
colors.setXYZ(i, 1, 0, 0);
}
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
flatShading: true,
vertexColors: true,
shininess: 0,
});
const wireframeMaterial = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
transparent: true,
});
let mesh = new THREE.Mesh(geometry, material);
let wireframe = new THREE.Mesh(geometry, wireframeMaterial);
mesh.add(wireframe);
mesh.scale.set(0.1, 0.1, 0.1);
const redColor = new THREE.Color(1, 0, 0);
console.log(mesh);
// mesh.children[0].material.color = redColor;
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
this.scene.add(light);
this.scene.add(mesh);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 "% loaded");
},
(error) => {
console.error(error);
}
);
},
uj5u.com熱心網友回復：
您也在渲染線框版本，它由螢屏空間中的線條組成。當您縮小時，這些線條以像素為單位保持相同的寬度，從而覆寫其他所有內容。
你也想渲染fireframe嗎？如果沒有，不要。如果你這樣做了，那么考慮在用戶縮小時隱藏它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522505.html
上一篇：讓我的“標題”文本顯示在導航欄上