Three.js 에서 격자 대상 MESH 의 속성 과 방법 에 대한 상세 한 설명

머리말
본 고 는 주로 Three.js 격자 대상 MESH 의 속성 과 방법 을 소개 하고 여러분 에 게 참고 학습 을 제공 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
하나의 격자 를 만 들 려 면 기하학 적,그리고 하나 이상 의 재질 이 필요 합 니 다.격자 가 만들어 진 후에 우 리 는 그것 을 장면 에 추가 하고 렌 더 링 할 수 있 습 니 다.격자 대상 은 장면 의 위치 와 디 스 플레이 효 과 를 바 꾸 는 데 몇 가지 속성 과 방법 을 제공 합 니 다.
다음 과 같다.

또 하나의 속성 은 visible 속성 입 니 다.기본 값 은 true 입 니 다.false 로 설정 하면 THREE.Mesh 는 장면 에 나타 나 지 않 습 니 다.
mesh 대상 의 앞의 세 가지 속성 position,rotation 과 scale 은 세 가지 설정 방법 이 있 습 니 다.
첫 번 째,관련 좌표 축 을 직접 설정 합 니 다.

 cube.position.x = 5;
 cube.position.y = 6;
 cube.position.z = 7;
두 번 째,x,y,z 좌표 의 값 을 한꺼번에 설정 합 니 다.

 cube.position.set(5,6,7); //      
세 번 째 는 모두 THREE.Vector 3 대상 이기 때문에 우 리 는 새로운 대상 에 게 직접 값 을 부여 할 수 있다.

 cube.position = new THREE.Vector3(5,6,7); //    
이미지 의 이러한 효 과 를 나타 내기 위해 나 는 사례 를 하나 썼 다.

이 효 과 는 dat.GUI 를 사용 하여 구현 되 는 효과 입 니 다.구체 적 인 효 과 는 코드 를 다운로드 하여 테스트 하면 됩 니 다.

<!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 settings;
 function initGui() {
 //                  
 settings = {
  positionX:0,
  positionY:5,
  positionZ:0,
  rotationX:0,
  rotationY:0,
  rotationZ:0,
  scaleX:1,
  scaleY:1,
  scaleZ:1,
  translateX:0,
  translateY:0,
  translateZ:0,
  translate:function () {
  //cube.translate(settings.translateX,settings.translateY,settings.translateZ);
  cube.translateX(settings.translateX);
  cube.translateY(settings.translateY);
  cube.translateZ(settings.translateZ);

  settings.positionX = cube.position.x;
  settings.positionY = cube.position.y;
  settings.positionZ = cube.position.z;
  },
  visible:true
 };

 //   gui
 var gui = new dat.GUI();

 var position = gui.addFolder("position");
 position.add(settings,"positionX",-30,30).listen();
 position.add(settings,"positionY",-30,30).listen();
 position.add(settings,"positionZ",-30,30).listen();
 var scale = gui.addFolder("scale");
 scale.add(settings,"scaleX",0.01,5);
 scale.add(settings,"scaleY",0.01,5);
 scale.add(settings,"scaleZ",0.01,5);
 var rotation = gui.addFolder("rotation");
 rotation.add(settings,"rotationX",-2*Math.PI,2*Math.PI);
 rotation.add(settings,"rotationY",-2*Math.PI,2*Math.PI);
 rotation.add(settings,"rotationZ",-2*Math.PI,2*Math.PI);
 var translate = gui.addFolder("translate");
 translate.add(settings,"translateX",-5,5);
 translate.add(settings,"translateY",-5,5);
 translate.add(settings,"translateZ",-5,5);
 translate.add(settings,"translate");
 gui.add(settings,"visible");
 }

 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);

 //   
 var cubeGeometry = new THREE.CubeGeometry(10,10,10);
 var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});

 cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

 //           
 cube.castShadow = true;

 scene.add(cube);

 //    
 var planeGeometry = new THREE.PlaneGeometry(100,100);
 var planeMaterial = new THREE.MeshStandardMaterial({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 = 100;
 //             
 controls.maxDistance = 200;
 //        
 controls.enablePan = true;
 }

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

 //         
 function onWindowResize() {

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

 }

 function animate() {
 //     
 render();

 //      
 stats.update();

 //      
 cube.position.set(settings.positionX,settings.positionY,settings.positionZ);
 cube.scale.set(settings.scaleX,settings.scaleY,settings.scaleZ);
 cube.rotation.set(settings.rotationX,settings.rotationY,settings.rotationZ);
 cube.visible = settings.visible;

 controls.update();

 requestAnimationFrame(animate);
 }

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

 animate();
 window.onresize = onWindowResize;
 }
</script>
</html>
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 에 게 Three.js 를 배우 거나 사용 하 는 데 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

좋은 웹페이지 즐겨찾기