안녕하세요 여러분.3.js에 gltf 모델을 로드하여 색상을 설정했다는 이상한 문제가 있습니다.확대할 때는 색상이 있지만 축소할 때는 모두 검은색입니다.그리고 소재에 직접 색을 맞추면 잘 작동합니다.감사해요.
샘플 스크린 사진과 코드입니다.
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);
}
); }, 질문에 대한 답변
화면 공간의 선으로 구성된 와이어프레임 버전도 렌더링합니다.축소할 때 이러한 선은 픽셀 단위로 동일한 너비를 유지하므로 다른 모든 것을 포함합니다.
파이어프레임도 렌더링하시겠습니까?아니면 하지 마세요.그럴 경우 사용자가 축소할 때 숨김을 고려해 보십시오.