Three.js 정점 을 이용 하여 입방체 를 그 리 는 방법 에 대한 상세 한 설명

8917 단어 three.js입방체정점
머리말
이전에 우 리 는 WebGL 기 초 를 배 울 때 매일 정점 위치,법 벡터,아래 표 시 를 그 리 는 것 을 연구 해 왔 다.복잡 하지만 원생 이 라 성능 은 말 할 것 도 없다.
three.js 도 우리 에 게 원생 의 방법 으로 모형 을 그 릴 수 있 도록 관련 인 터 페 이 스 를 제공 해 주 었 다.다음은 더 이상 할 말 이 없 으 니 상세 한 소 개 를 해 보 자.
다음은 제 개인 적 인 사례 입 니 다.
우선,나 는 빈 모양 을 만 들 었 다.

  //   
  var cubeGeometry = new THREE.Geometry();
입방체 의 형상 은 다음 과 같다.

  //        
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3
그리고 입방체 의 정점 을 추 가 했 습 니 다.모두 8 개 입 니 다.

  //        
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;
이 어 정점 의 좌 표를 통 해 입방체 의 면 을 만 들 었 다.

  //      
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;
여기 서 주의해 야 할 것 은:
(1)면 은 세 개의 정점 으로 구 성 된 삼각형 면 이자 WebGL 의 실현 면 방식 이다.장방형 이 필요 하 다 면,두 삼각형 을 조합 해 야 한다.
(2)만약 에 그 리 려 는 면 이 카 메 라 를 향 한 것 이 라면 이 면 의 정점 을 쓰 는 방식 은 시계 반대 방향 으로 그 리 는 것 이다.예 를 들 어 그림 에 있 는 모형 의 첫 번 째 면 에 추가 한 것 은(0,1,2)이다.
(3)모델 에 조명 효 과 를 줄 수 있다 면 법 적 벡터 를 설정 하여 three.js 가 자동 으로 생 성 되도록 하면 된다.다음 과 같다.

  //     
  cubeGeometry.computeFaceNormals();
현재 이 절 차 는 모양 만 생 성 되 었 을 뿐 이전 과 같이 무늬 를 설정 한 다음 THTEE.Mesh()방법 으로 격자 를 생 성 해 야 합 니 다.

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
이렇게 해서 입방체 의 그리 기 를 실현 했다.

모든 코드 는 다음 과 같 습 니 다:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  html, body {
   margin: 0;
   height: 100%;
  }

  canvas {
   display: block;
  }

 </style>
</head>
<body onload="draw();">

</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
 var renderer;
 function initRender() {
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  //           
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; //     ，          THREE.PCFShadowMap
  document.body.appendChild(renderer.domElement);
 }

 var camera;
 function initCamera() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 40, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
 }

 var scene;
 function initScene() {
  scene = new THREE.Scene();
 }

 //   dat.GUI      
 var gui;
 function initGui() {
  //                  
  gui = {
   lightY: 30, //  y    
   cubeX: 25, //    x   
   cubeY: 10, //    x   
   cubeZ: -5 //    z    
  };
  var datGui = new dat.GUI();
  //        gui  ，gui.add(  ，  ，   ，   ）
  datGui.add(gui, "lightY", 0, 100);
  datGui.add(gui, "cubeX", -30, 30);
  datGui.add(gui, "cubeY", -30, 30);
  datGui.add(gui, "cubeZ", -30, 30);
 }

 var light;
 function initLight() {
  scene.add(new THREE.AmbientLight(0x444444));

  light = new THREE.PointLight(0xffffff);
  light.position.set(15, 30, 10);

  //             
  light.castShadow = true;

  scene.add(light);
 }

 var cube;
 function initModel() {

  //    
  var helper = new THREE.AxisHelper(10);
  scene.add(helper);

  //        
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3

  //   
  var cubeGeometry = new THREE.Geometry();

  //        
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;

  //      
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;

  //     
  cubeGeometry.computeFaceNormals();

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = 25;
  cube.position.y = 5;
  cube.position.z = -5;

  //           
  cube.castShadow = true;

  scene.add(cube);

  //    
  var planeGeometry = new THREE.PlaneGeometry(100, 100);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa});

  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -0;

  //            
  plane.receiveShadow = true;

  scene.add(plane);

 }

 //       
 var stats;
 function initStats() {
  stats = new Stats();
  document.body.appendChild(stats.dom);
 }

 //               ，      ，    
 var controls;
 function initControls() {

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  //     animate   ，      
  //controls.addEventListener( 'change', render );
  //                      
  controls.enableDamping = true;
  //                  
  //controls.dampingFactor = 0.25;
  //      
  controls.enableZoom = true;
  //      
  controls.autoRotate = false;
  //             
  controls.minDistance = 50;
  //             
  controls.maxDistance = 200;
  //        
  controls.enablePan = true;
 }

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

 //         
 function onWindowResize() {

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

 }

 function animate() {
  //     
  render();

  //      
  stats.update();

  //      
  light.position.y = gui.lightY;
  cube.position.x = gui.cubeX;
  cube.position.y = gui.cubeY;
  cube.position.z = gui.cubeZ;

  controls.update();

  requestAnimationFrame(animate);
 }

 function draw() {
  initGui();
  initRender();
  initScene();
  initCamera();
  initLight();
  initModel();
  initControls();
  initStats();

  animate();
  window.onresize = onWindowResize;
 }
</script>
</html>
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 에 게 Three.js 를 배우 거나 사용 하 는 데 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
JS 가 실현 하 는 간단 한 사 칙 연산 계산기 기능 예시
node+express+ejs+boottstrap 구축 프로젝트 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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