인프런 커뮤니티 질문&답변

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);

});