roughness이 안 먹혀요 ㅜ
139
작성자 없음
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);
});
Answer 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 문제 해결 방법 (강의 자료에 포함된 내용은 외부에서 참고할 수 없습니다)
위의 설명이 도움이 되었기를 바랍니다. 문제 해결에 어려움이 있다면, 추가적인 정보를 주시면 더 많은 도움을 드릴 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
쿠키 생성 관련
0
5
1
rotation.x 방향
0
4
1
JWT auth error invalid token
0
17
2
경력기술서는 어떤 방향이 좋을까요?
0
20
2
MSA 와 BFF 아키텍처 설명 부분에 대한 문의
0
39
1
왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?
0
53
3
어플리케이션 실행 후 에러에 관하여 질문 드립니다.
2
55
2
eslint.config.js 설정 질문입니다.
0
53
2
7강 흐름 제어 아키택쳐 코드 순서
1
43
1
수업자료 어디서 찾아볼 수 있나요?
0
42
2
함수 강의의 정답.. 어떤가요?
0
35
1
깃권한요청드립니다
0
37
1
26,27강 진행 간 노션, html 프롬프트 파일 불일치
0
49
3
<div id="banner">배너 이미지</div> 관련 질문
0
31
1
맥북 듀얼모니터 사용 displaylink manager 사용시 화면이 안보입니다.
0
104
1
수업을 들으면서...
0
61
1
camera.lookAt이 원래 이런건가요?
0
271
1
화면 출력에서 이상해요
1
345
2
Github에서 deploy 하려면 따로 방법이 있나요?
0
339
2
WebGL 1 지원 중단에 대해
0
606
2
index.html 실행 시 CORS 문제
0
530
1
소스코드 공유는 없을까요?
1
489
1
강의 영상에서 보이는 색과 다른 색상이 나옵니다.
1
573
2
섹션2 Material 학습 중에 마우스 드래그로 돌려보는 기능?
2
510
2

