튜토리얼을 보면서 threejs를 연습하고 있습니다. 그러나 한 가지 문제가 발생했습니다. 마우스 제어 코드가 작동하지 않습니다. 검은 화면 만. 확인했지만 튜토리얼과 똑같은 코드입니다. 그러나 내 것은 작동하지 않습니다. 저는 Chrome의 최신 버전이고 GitHub의 OrbitControls.js에서 최신 파일을 받았습니다. 튜토리얼과 다른 점은 OrbitControls.js 파일 뿐이라고 생각합니다. 어떻게해야합니까?
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
window.addEventListener('load', init);
function init() {
const width = 960;
const height = 540;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, 1000);
const controls = new THREE.OrbitControls(camera);
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(300, 300, 300),
new THREE.MeshNormalMaterial()
);
scene.add(mesh);
tick();
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
이러한 가져 오기 문제의 일반적인 근본 원인 중 하나 three.js는 다른 릴리스 의 구성 요소를 사용하는 것입니다 . 다음과 같이 코드를 가져 와서 쉽게 확인할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
또 다른 가능한 문제는 OrbitControls. 의 최신 버전에서는 three.js두 번째 매개 변수가 필수입니다. 코드가 다음과 같아야한다는 것을 의미합니다.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다