강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của khv08048455
khv08048455

câu hỏi đã được viết

Web tương tác 3D bắt đầu với Three.js

DragControls

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

Viết

·

97

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

Câu trả lời 1

0

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

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

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

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

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

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

Hình ảnh hồ sơ của khv08048455
khv08048455

câu hỏi đã được viết

Đặt câu hỏi