inflearn logo
강의

Course

Instructor

3D interactive web starting with Three.js

DragControls

DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!

104

khv08048455

8 asked

0

DragControls 1:05초에 인자를 바꾸지 않으면 에러가 나야하는데, 저는 에러가 안뜨는데 이유가 뭘까요??

서버도 껐다가 다시 켜도 동작만 안될 뿐이고, 에러는 안납니다!

import * as THREE from 'three';
import { DragControls } from 'three/examples/jsm/Addons.js';

// ----- 주제: PointerLockControls 클릭 시 마우스 커서 사라지고, 마인크래프트 스타일로 변경됨

export default function example() {
  // Renderer
  const canvas = document.querySelector('#three-canvas');
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  // Scene
  const scene = new THREE.Scene();

  // Camera
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 1.5;
  camera.position.z = 4;
  scene.add(camera);

  // Light
  const ambientLight = new THREE.AmbientLight('white', 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight('white', 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);

  // Controls
  const controls = new DragControls(camera, renderer.domElement);

  // Mesh
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  let mesh;
  let material;
  for (let i = 0; i < 20; i++) {
    material = new THREE.MeshStandardMaterial({
      // rgb (0,0,0)~(255,255,255) => (0,0,0)인 경우 검은색에 가까워지므로 최소:50 최대:250-50
      color: `rgb(
			${50 + Math.floor(Math.random() * 205)}, 
			${50 + Math.floor(Math.random() * 205)}, 
			${50 + Math.floor(Math.random() * 205)}
			)`,
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - 0.5) * 5;
    mesh.position.y = (Math.random() - 0.5) * 5;
    mesh.position.z = (Math.random() - 0.5) * 5;

    scene.add(mesh);
  }

  // 그리기
  const clock = new THREE.Clock();

  function draw() {
    const delta = clock.getDelta();

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  // 이벤트
  window.addEventListener('resize', setSize);

  draw();
}

blender 인터랙티브-웹 three.js

Answer 1

0

communityai8509

안녕하세요, 김혜빈님. 인프런 AI 인턴입니다.

DragControls 사용 시 에러가 나지 않는 이유는 몇 가지 원인이 있을 수 있습니다. 기본적으로, Three.js의 라이브러리에서는 사용자가 코드를 조금 잘못 작성해도 큰 오류 메시지를 생성하기보다는 조용히 동작하지 않거나 예상하지 못한 결과를 초래할 수 있습니다.

여기에서 DragControls의 첫 번째 인자는 드래그 가능한 Objets의 배열이어야 합니다. controls에 적용할 객체를 설정하지 않아서 에러가 발생할 것으로 예상할 수 있지만, 실제로는 controls가 작동되지 않을 뿐, JavaScript에서는 이 상황을 에러로 취급하지 않을 수 있습니다. 삼각함수를 실행할 때 타입이 잘못되었다면 명시적으로 오류가 나야 합니다.

따라서, 사용자가 원하는 기능이 “작동하지 않는다”고 이해해야 합니다. 올바르게 작동하게 하려면, 드래그 가능한 객체를 new DragControls([mesh], camera, renderer.domElement);와 같이 설정해야 합니다. 그러면 다수의 객체도 드래그가 될 수 있습니다.

관련된 내용이나 비슷한 질문이 있다면 아래 링크에서 확인할 수 있습니다:
- DragControls 사용 시 발생할 수 있는 오류 처리 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

box3.position.x 위치

0

38

1

리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?

0

81

1

소스코드 파일이 강의랑 같나요?

0

119

2

materials 배열에 있는 top, bottom ... 들에 대해서

0

118

0

gltf 포맷 사용

0

243

1

점프 애니메이션 stop

0

127

2

사양에 따른 다른 결과

0

112

1

중복 질문 삭제

0

160

1

혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?

0

124

1

gltf.scene.children 이 없는데도 모델이 화면에 떠요

0

101

2

GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!

0

160

1

일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요

0

77

0

그림자가 다르게 표현됩니다

0

138

1

setAnimationLoop 위치가...

0

99

1

얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요

0

135

1

블렌더 texture paint 시 미러모드

0

164

0

blender 에서 색칠하기 편 Texter paint slot추가없음

0

966

2

fin 버전도 그냥 실행이 안돼요

0

289

2

자바스크립트 실행이 안되는 것 같아요

0

380

1

모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?

0

238

1

live server와 localhost:8080

0

345

1

material에 canvas 를 texture 로 넣는방법이 궁금해요

0

270

1

모바일 조이스틱은 어떻게 만들 수 있을까요?

0

208

1

징검다리 예제에서 SpotLight가 동작 오류

0

303

2