three.js로 장면 인스턴스 생성에 대한 자세한 설명-JS 튜토리얼-php.cn

이 글은 three.js 중국어 문서 학습을 위한 시나리오 작성에 대한 관련 정보를 주로 소개합니다. 이 글은 three.js를 배우거나 사용하는 모든 사람에게 확실한 참고 학습 가치를 제공합니다. 아래에서 따라가면 됩니다.

Three.js가 무엇인가요?

이 글을 읽고 계시다면 Three.js에 대해 어느 정도 이해가 되셨을 테니 Three.js가 무엇인지 간단히 소개하겠습니다.
Three.js는 브라우저에서 WebGL 3D 효과를 가능하게 하는 라이브러리로 사용하기 쉽습니다. 원시 WebGL의 간단한 큐브는 수백 줄의 Javascript 및 셰이더 코드로 바뀌지만 Three.js에는 약간의 코드만 필요합니다.

이 섹션의 목표는 three.js를 소개하는 것입니다. 우리는 회전하는 큐브를 사용하여 장면을 구축하는 것부터 시작했습니다. 어려움이 있거나 도움이 필요한 경우 페이지 하단에 참조할 수 있는 소스 코드가 있습니다.

장면에 필요한 세 가지 이상의 구성 요소 유형

카메라/화면에 렌더링할 내용 결정
광원/재료 표시 방법 및 생성 시 재료 사용 방법에 영향을 미칩니다. 그림자
객체/사각형, 구 등 카메라 관점에서 주요 렌더링 형태입니다.

시작하기 전에

다음 HTML 코드를 컴퓨터에 저장하고 node.js 디렉터리를 찾은 다음 브라우저에서 열기

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

로그인 후 복사

다음 코드는 스크립트 태그에 다운로드됩니다

샘플 장면 만들기

three.js를 데모용으로 사용하려면 장면, 카메라 세 가지 요소가 필요합니다. , 카메라 장면을 렌더링하는 렌더러입니다.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

로그인 후 복사

잠시 무슨 일이 일어나고 있는지 설명해 보겠습니다. 이제 장면, 카메라 및 렌더러를 만들었습니다.

three.js에는 여러 대의 카메라가 있습니다. 임시로 PerspectiveCamera(원근 카메라)를 사용하고 있습니다.

첫 번째 속성은 가시 시야 범위인 시야각(FOV)이며, 그 값은 각도 크기를 나타냅니다.

두 번째 속성은 종횡비입니다. 대부분의 경우 너비를 높이로 나눈 값을 사용하려고 합니다. 그렇지 않으면 와이드스크린 TV에서 오래된 영화처럼 이미지가 찌그러진 것처럼 보입니다.

마지막 두 가지 속성은 가까운 시야와 먼 시야입니다. 이 두 면 사이의 영역만 렌더링됩니다. 지금은 이에 대해 걱정할 필요가 없습니다. 이러한 매개변수를 사용하면 성능이 향상될 수 있습니다.

다음에는 렌더러에 대해 이야기해 보겠습니다. 이것이 바로 마법이다. 여기서 사용하는 WebGLRenderer 외에도 three.js는 WebGL을 지원하지 않는 이전 브라우저에서 사용할 수 있는 일부 렌더러도 제공합니다.

렌더러 인스턴스를 생성하는 것 외에도 애플리케이션 렌더링의 크기도 설정해야 합니다. 애플리케이션의 전체 너비와 높이(이 경우 브라우저 창의 너비와 높이)를 채우는 방법을 사용하는 것이 좋습니다. 성능 우선 애플리케이션의 경우 setSize를 사용하여 window.innerHeight/2, window.innerWidth/2와 같이 더 작은 값을 설정하여 크기를 절반으로 렌더링할 수 있습니다.

전체 크기를 낮은 해상도로 렌더링하려면 캔버스 요소의 너비와 높이가 다음과 같은 경우 setSize - uodateStyle의 세 번째 매개변수를 false로 설정할 수 있습니다. 100%이면 응용 프로그램이 1/2 해상도로 렌더링됩니다.

이제 HTML에 렌더링된 요소를 추가해야 합니다. 렌더러는 캔버스를 통해 장면을 보여줍니다.

“다 좋은데 아까 말했던 큐브는 어쩌죠?” 이제 그걸 추가해 보겠습니다.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

로그인 후 복사

큐브를 생성하려면 BoxGeometry가 필요합니다. 이 개체에는 큐브의 모든 점(정점)과 채우기(면)가 포함되어 있습니다. 그것에 대해서는 나중에 논의하겠습니다.

기하학 외에도 색칠할 재료도 필요합니다. three.js는 몇 가지 자료를 제공하지만 지금은 MeshBasicMaterial을 사용하겠습니다. 모든 재질은 모든 속성을 포함하는 객체를 수용하고 적용합니다. 단순화를 위해 녹색 - 0x00ff00이라는 하나의 색상 속성만 제공합니다. CSS 및 PS와 동일한 16진수 색상을 사용합니다.

우리에게 필요한 세 번째 요소는 메쉬입니다. 메시는 형상에 재질을 적용하는 객체로, 이를 장면에 배치하고 자유롭게 이동할 수 있습니다.

scene.add()를 호출하면 추가한 내용이 기본적으로 좌표(0, 0, 0,)에 표시됩니다. 이로 인해 카메라와 큐브가 내부적으로 겹쳐집니다. 이를 방지하려면 카메라를 조금 더 바깥쪽으로 이동하면 됩니다.

렌더링 장면

위 코드를 HTML 파일에 복사하면 화면에 아무것도 표시되지 않습니다. 아직 장면을 렌더링하지 않았기 때문입니다. 따라서 렌더러나 애니메이션 루프를 호출해야 합니다.

function animate() {
 requestAnimationFrame( animate );
 renderer.render( scene, camera );
}
animate();

로그인 후 복사

이렇게 하면 렌더러가 매초마다 한 프레임씩 그리는 루프가 생성됩니다. 웹 게임 프로그래밍에 대해 잘 모르는 경우 "왜 setInterval 함수를 작성하지 않습니까?"라고 말할 수 있습니다. 실제로는 할 수 있지만 requestAnimationFrame에는 더 많은 이점이 있습니다. 가장 중요한 이점은 브라우저가 다른 탭으로 전환될 때 requestAnimationFrame이 렌더링을 일시 중지하므로 소중한 처리 능력과 배터리 수명이 낭비되지 않는다는 것입니다.

큐브를 움직이게 하세요

방금 만든 코드를 삽입하면 녹색 큐브가 보일 것입니다. 지루해지지 않도록 회전시켜 보세요.

animate 함수의 renderer.render에 다음 코드를 추가하세요.

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

로그인 후 복사

它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。

结果

恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。

完整代码参考如下。琢磨一下并深刻理解其工作机理

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  animate();
 </script>
 </body>
</html>

로그인 후 복사