roughness이 안 먹혀요 ㅜ
125
작성자 없음
작성한 질문수 0
Material 수업강의 중
2:44초에 roughness이 안먹힙니다..
빛반사가 안되는데 확인 부탁드려요 ㅜ
<script async src="https://ga.jspm.io/npm:es-module-shims@2.0.10/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports":{
"three" : "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/"
}
}
import * as THREE from "three";
const $result = document.querySelector("#result");
// 1. Scene : 화면에서 보여주려는 객체를 담는 공간
const scene = new THREE.Scene();
// scene.add(요소)
scene.background = new THREE.Color(0xffe287);
// 2. Camera : 신을 바라볼 시점을 결정
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(2, 2, 2);
camera.lookAt(0, 0, 0);
// 3. Renderer : Scene+Camera, 화면을 그려주는 역할
const renderer = new THREE.WebGLRenderer({
canvas: $result, antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// document.body.appendChild(renderer.domElement)
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(2, 4, 3);
scene.add(light);
const geometry = new THREE.BoxGeometry(1, 1, 1)
const basic = new THREE.MeshBasicMaterial({
color: 0x2e6ff2,
// wireframe: true,
transparent: true,
opacity: 0.5
});
// 가장 일반적으로 사용 됨.
const standard = new THREE.MeshStandardMaterial({
color: 0xffaaaa,
roughness: 0.2,
});
const mesh = new THREE.Mesh(geometry, standard);
scene.add(mesh);
function animate() {
// box.rotation.y += 0.01;
// box.rotation.x += 0.01;
// console.log(box.rotation.y);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
// 반응형을 위한 함수
window.addEventListener("resize", () => {
// 1. 카메라의 종횡비
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); //카메라 업데이트
// 2. renderer의 크기
renderer.setSize(window.innerWidth, window.innerHeight);
});
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
Three.js에서 roughness 속성이 작동하지 않는 문제를 겪고 계신 것 같습니다. roughness 속성은 MeshStandardMaterial의 속성으로, 표면의 거칠기를 나타내며 빛 반사를 조절하는데 중요한 역할을 합니다. 이 속성이 효과를 보기 위해서는 광원 설정과 물체의 재질 모두가 적절히 구성되어야 하는데, 아래 몇 가지 점을 확인해 보실 수 있습니다:
광원 확인:
- 지금 사용 중이신 광원은
DirectionalLight인데요, 이 광원은 이름대로 방향성을 갖는 빛을 주로 조사합니다.MeshStandardMaterial와 같은 물리 기반 재질이 적용된 메쉬에서는 빛의 방향과 강도에 따라roughness효과가 다르게 나타날 수 있습니다.
PointLight또는AmbientLight를 추가적으로 사용해 보시면 각기 다른 빛의 영향을 확인할 수 있습니다.AmbientLight는 전체적인 환경 빛을 추가하여 물체가 고르게 빛을 받을 수 있게 합니다.
- 지금 사용 중이신 광원은
Material 설정 확인:
MeshStandardMaterial의roughness와 함께metalness를 조정해보세요. 이 두 속성은 상호작용하며 표면의 반사광 느낌을 세밀하게 조절합니다. 예를 들어,metalness를 0.5 정도로 낮게 설정하여 시작해 보시면 좀 더 광택있는 느낌을 받을 수 있습니다.
렌더러 설정:
- 코드를 보면
renderer가 인스턴스화될 때antialias: true옵션이 설정되어 있습니다. 이 옵션은 가장자리에 있던 시각적 왜곡을 줄여줍니다.
- 추가적으로
physicalCorrectLights라는 속성(필요한 경우 추가)이나toneMapping설정(예를 들어THREE.ACESFilmicToneMapping)을 적용해주는 것도 반사광 조정을 도와줄 수 있습니다.
- 코드를 보면
관련된 질문과 답변은 아래에서 확인하실 수 있습니다:
- 떨어져보는 Three.js의 roughness 문제 해결 방법 (강의 자료에 포함된 내용은 외부에서 참고할 수 없습니다)
위의 설명이 도움이 되었기를 바랍니다. 문제 해결에 어려움이 있다면, 추가적인 정보를 주시면 더 많은 도움을 드릴 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
3
0
2강 nodejs 3단계 설명 질문
0
21
1
6-6 실습 문의
0
18
2
imagesLoaded에 관한 질문
0
16
2
useEffect와 lifecycle문의
0
22
2
섹션5 노션링크 는 따로 없나요?
0
22
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
30
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
23
2
프론트엔드 학습 수준 문의
0
31
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
21
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
45
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
46
2
claude plugin 방법 자세히 부탁드려요
0
39
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
39
2
맥북 듀얼모니터 사용 displaylink manager 사용시 화면이 안보입니다.
0
75
1
수업을 들으면서...
0
44
1
camera.lookAt이 원래 이런건가요?
0
253
1
화면 출력에서 이상해요
1
316
2
Github에서 deploy 하려면 따로 방법이 있나요?
0
313
2
WebGL 1 지원 중단에 대해
0
578
2
index.html 실행 시 CORS 문제
0
516
1
소스코드 공유는 없을까요?
1
476
1
강의 영상에서 보이는 색과 다른 색상이 나옵니다.
1
565
2
섹션2 Material 학습 중에 마우스 드래그로 돌려보는 기능?
2
501
2





