JS 라 이브 러 리 의 Three.js 간이 입문 강좌(상세 한 설명 중 하나)

10150 단어 three.js입문 하 다

오 프 닝 멘 트
webGL 은 canvas 에서 3D 효 과 를 실현 할 수 있 습 니 다.한편,three.js 는 webGL 프레임 워 크 로 사용 하기 쉽 기 때문에 광범 위 하 게 응용 된다.웹 GL 을 배 우려 면 복잡 한 네 이 티 브 인 터 페 이 스 를 버 리 고 이 프레임 워 크 에서 시작 하 는 것 이 좋 은 선택 이다.
블 로 거들 도 현재 three.js 를 공부 하고 있 는데 관련 자료 가 매우 적 고 심지어 공식 api 문서 도 매우 거 칠 기 때문에 많은 효 과 는 스스로 코드 를 천천히 두 드 려 서 모색 해 야 한다.그래서 제 가 이 강 좌 를 쓰 는 목적 은 하 나 는 제 가 정리 하 는 것 이 고 다른 하 나 는 여러분 과 공유 하 는 것 입 니 다.
이 편 은 시리즈 튜 토리 얼 의 첫 번 째 편:입문 편 이다.이 글 에서 저 는 간단 한 demo 를 예 로 들 어 three.js 의 기본 설정 방법 을 논술 하 겠 습 니 다.이 글 을 다 배우 면 브 라 우 저 에서 입체 도형 을 그 리 는 법 을 배 울 것 입 니 다!
준비 작업
코드 를 쓰기 전에 당신 은 먼저 최신 three.js 프레임 워 크 를 내 려 가 야 합 니 다.당신 의 페이지 에 three.js 를 도입 해 야 합 니 다.물론 파일 가방 안에 도 많은 demo 가 있어 서 모두 가 공부 하기에 편리 합 니 다.
chrome 은 현재 webGL 을 지원 하 는 가장 좋 은 브 라 우 저 입 니 다.Firefow 가 그 다음 이 고 국내의 여행,치타 도 테스트 를 통 해 실 행 될 수 있 습 니 다.
실례 부터 입문!
우선 html 를 구축 합 니 다.다음 과 같 습 니 다.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--  Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 div#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--  canvas   -->
 <div id="container"></div>
 </body>
</html>
액자 크기 와 일치 하 는 영역 을 WebGL 로 그립 니 다.구체 적 으로 말 하면:
(1)body 태그 에 id 를'canvas3d'로 추가 한 div 요소 입 니 다.
(2)style 탭 에서'canvas3d'의 CSS 스타일 을 지정 합 니 다.
주의해 야 할 것 은,우 리 는라벨 을 쓸 필요 가 없습니다.우 리 는 canvas 를 담 는 div 만 정의 하면 됩 니 다.canvas 는 three.js 동적 으로 생 성 됩 니 다!
다음 에 우 리 는 스 크 립 트 를 쓰기 시작 합 니 다.우 리 는 다음 과 같은 5 단 계 를 통 해 간단 한 입체 모델 을 구축 할 것 입 니 다.이것 도 three.js 의 기본 적 인 절차 입 니 다.
1.three.js 렌 더러 설정
3 차원 공간 안의 물체 가 2 차원 평면 에 비 치 는 과정 을 3 차원 렌 더 링 이 라 고 한다.일반적으로 우 리 는 렌 더 링 작업 을 하 는 소프트웨어 를 렌 더 링 기 라 고 부른다.구체 적 으로 다음 과 같은 처 리 를 해 야 한다.
(0)전역 변수(대상)를 설명 합 니 다.
(1)캔버스'canvas-frame'의 높이 획득 하기;
(2)렌 더러 대상 생 성(속성:톱날 저항 효 과 는 설정 에 유효 함);
(3)렌 더러 의 높이 를 지정 합 니 다(캔버스 상자 크기 와 일치 합 니 다).
(4)【canvas】원 소 를【canvas3d】원소 에 추가 하기;
(5)렌 더러 의 제거 색(clearColor)을 설정 합 니 다.

//  Three.js   
var renderer;//      （  ）
function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//    「canvas3d」  
 height = document.getElementById('canvas3d').clientHeight;//    「canvas3d」  
 renderer=new THREE.WebGLRenderer({antialias:true});//       （  ：          ）
 renderer.setSize(width, height );//        （        ）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//   【canvas】     【canvas3d】    。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//  canvas   (clearColor)
}
2.카메라 카메라 설치
OpenGL(WebGL)에서 3 차원 공간의 물체 가 2 차원 공간 에 투영 되 는 방식 에는 투시 투영 과 정투영 두 가지 카메라 가 존재 한다.투시 투영 은 시점 부터 가 까 운 물체 가 클 수록 먼 곳 의 물체 가 그 리 는 작은 방식 으로 일상생활 에서 우리 가 물 체 를 보 는 방식 과 일치 하 다.정투영 은 물체 와 시점 거 리 를 막론하고 통 일 된 크기 에 따라 그리 고 건축 과 디자인 등 분야 에서 여러 각도 에서 물 체 를 그 려 야 하기 때문에 이런 투영 은 광범 위 하 게 응용 된다.Three.js 에서 도 투시 투영 과 정투영 두 가지 방식 의 카 메 라 를 지정 할 수 있다.본 고 는 다음 과 같은 절차 에 따라 투시 투영 방식 을 설정한다.
(0)전역 변수(대상)를 설명 합 니 다.
(1)투시 투영 카 메 라 를 설치한다.
(2)카메라 의 위치 좌 표를 설정 합 니 다.
(3)카메라 의 위 를'z'축 방향 으로 설정 합 니 다.
(4)시야 의 중심 좌 표를 설치한다. 　　　　　

　 //    
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//         ,            Y ，    X ，  Z   （   ：fov    ：aspect            ：near            ：far）
 camera.position.x = 0;//         
 camera.position.y = 50;//         
 camera.position.z = 100;//         
 camera.up.x = 0;//       「x」   
 camera.up.y = 1;//       「y」   
 camera.up.z = 0;//       「z」   
 camera.lookAt( {x:0, y:0, z:0 } );//         
 }
3.장면 장면 설정
장면 은 바로 3 차원 공간 이다.[scene]클래스 로[scene]이라는 대상 을 설명 합 니 다.　　　　　

　　//    
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
4.광원 라이트 설정
OpenGL(WebGL)의 3 차원 공간 에는 점 광원 과 스포트라이트 두 종류 가 존재 한다.그리고 점 광원 의 특례 로 평행 광원(무선 원 광원)도 존재 한다.또한 광원 의 매개 변수 로[환경 광]등 설정 도 할 수 있다.이에 대응 하여 Three.js 에 서 는[점 광원(Point Light)][스포트라이트(Spot Light)][평행 광원(Direction Light)]과[환경 광(Ambient Light)]을 설정 할 수 있 습 니 다.OpenGL 과 마찬가지 로 한 장면 에 여러 개의 광원 을 설정 할 수 있다.기본적으로 환경 광 과 다른 몇 가지 광원 을 조합 한다.환경 광 을 설치 하지 않 으 면 빛 이 비치 지 않 는 면 이 너무 어 두 워 진다.본 고 는 먼저 아래 의 절차 에 따라 평행 광원 을 설정 하고 그 후에 환경 광 을 추가 할 것 이다.
(0)전역 변수 설명(대상)
(1)평행 광원 설정
(2)광원 벡터 설정
(3)장면 에 광원 추가
여기 서 우 리 는'Directional Light'류 로[light]라 는 대상 을 설명 하여 평행 광원 을 대표 한다.

　　　　//    
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//      
 light.position.set( 200, 200, 200 );//      
 scene.add(light);//        
 }
5.물체 오 브 젝 트 설정
   여기,우 리 는 공 모형 을 성명 한다.

　　　//    
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //    
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
마지막 으로,우 리 는 주 함 수 를 써 서 상기 5 단 계 를 실행 합 니 다.

　　　　　　　　//  
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
이 때 위 프로그램 을 테스트 하면 브 라 우 저 창 에 그 려 진 구형 모형 이 나타 납 니 다.

총결산
이상 은 three.js 의 입문 내용 입 니 다.우리 의 핵심 5 단 계 는:
1.three.js 렌 더러 설정
2.카메라 카메라 설치
3.장면 장면 설정
4.광원 라이트 설정
5.물체 오 브 젝 트 설정
그 중 일부 설정 은 아직 잘 모 르 실 수도 있 습 니 다.괜 찮 습 니 다.뒤의 몇 편의 글 은 상기 다섯 가지 주요 절차 에 대해 상세 하 게 설명 할 것 입 니 다.기대 하 세 요~~
이 예 전체 코드:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--  Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //  Three.js   
 var renderer;//      （  ）
 function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//    「canvas3d」  
 height = document.getElementById('canvas3d').clientHeight;//    「canvas3d」  
 renderer=new THREE.WebGLRenderer({antialias:true});//       （  ：          ）
 renderer.setSize(width, height );//        （        ）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//   【canvas】     【canvas3d】    。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//  canvas   (clearColor)
 }
 //    
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//         ,            Y ，    X ，  Z   （   ：fov    ：aspect            ：near            ：far）
 camera.position.x = 0;//         
 camera.position.y = 50;//         
 camera.position.z = 100;//         
 camera.up.x = 0;//       「x」   
 camera.up.y = 1;//       「y」   
 camera.up.z = 0;//       「z」   
 camera.lookAt( {x:0, y:0, z:0 } );//         
 }
 //    
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //    
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//      
 light.position.set( 200, 200, 200 );//      
 scene.add(light);//        
 }
 //    
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //    
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //  
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 div#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload='threeStart();'>
 <!--  canvas   -->
 <div id="canvas3d"></div>
 </body>
</html>
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 라 이브 러 리 의 Three.js 간이 입문 편(상세 한 설명 중 하나)입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
vue 기반 문자 인증 코드 카운트다운 demo
JS 라 이브 러 리 의 Particles.js vue 에서 의 활용 사례 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage