Three.js의 기본 사항 알아보기-JS 튜토리얼-php.cn

Three.js의 기본 사항 알아보기

高洛峰

풀어 주다： 2017-01-21 09:21:11

원래의

1959명이 탐색했습니다.

1. Three.js 사용에 대한 몇 가지 이론적 설명

1. Threejs.org/

를 참조하세요. 2. js < 실제로 Three.js로 무엇이든 표시하려면 장면, 카메라, 카메라로 장면을 렌더링할 수 있는 렌더러 세 가지가 필요합니다.

3 장면 간의 관계. 장면, 카메라 카메라, 렌더러 렌더러

Three.js의 기본 사항 알아보기 3. Three.js를 이용한 회전 큐브 그리기

구현 효과도는 다음과 같습니다

Three.js의 기본 사항 알아보기 케이스 케이스 소스코드

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>用threejs构建室内模型</title>
 <style>
 #canvas-frame {
 width: 100%;
 height: 600px;
 }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
 var renderer, //渲染器
 width = document.getElementById(&#39;canvas-frame&#39;).clientWidth, //画布宽
 height = document.getElementById(&#39;canvas-frame&#39;).clientHeight; //画布高
 //初始化渲染器
 function initThree(){
 renderer = new THREE.WebGLRenderer({
  antialias : true
  //canvas: document.getElementById(&#39;canvas-frame&#39;)
 });
 renderer.setSize(width, height);
 renderer.setClearColor(0xFFFFFF, 1.0);
 document.getElementById(&#39;canvas-frame&#39;).appendChild(renderer.domElement);
 renderer.setClearColor(0xFFFFFF, 1.0);
 }
 //初始化场景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透视相机
 camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
 camera.position.x = 50;
 camera.position.y = 150;
 camera.position.z =150;
 camera.up.x = 0;
 camera.up.y = 1; //相机朝向--相机上方为y轴
 camera.up.z = 0;
 camera.lookAt({ //相机的中心点
  x : 0,
  y : 0,
  z : 0
 });
 // camera 正交相机
 /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
 camera.position.x = 250;
 camera.position.y = 100;
 camera.position.z = 1800;
 camera.up.x = 0;
 camera.up.y = 1; //相机朝向--相机上方为y轴
 camera.up.z = 0;
 camera.lookAt({ //相机的中心点
  x : 0,
  y : 0,
  z : 0
 });*/
 }
 function initLight(){
 // light--这里使用环境光
 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
 //light.position.set(600, 1000, 800);
 var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
 scene.add(light);
 }
 function initObject(){ //初始化对象
 //初始化地板
 initFloor();
 }
 function initGrid(){ //辅助网格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //创建一个立方体
 var geometry = new THREE.BoxGeometry(80, 20, 80);
  for ( var i = 0; i < geometry.faces.length; i += 2 ) {
  var hex = Math.random() * 0xffffff;
  geometry.faces[ i ].color.setHex( hex );
  geometry.faces[ i + 1 ].color.setHex( hex );
 }
 var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
 //将material材料添加到几何体geometry
 var mesh = new THREE.Mesh(geometry, material);
 mesh.position = new THREE.Vector3(0,0,0);
 scene.add(mesh);
 }
 //初始化页面加载
 function threeStart(){
 //初始化渲染器
 initThree();
 //初始化场景
 initScene();
 //初始透视化相机
 initCamera();
 //初始化光源
 initLight();
 //模型对象
 initObject();
 //初始化网格辅助线
 initGrid();
 renderer.render(scene, camera);
 //实时动画
 //animation();
 }
 function animation(){
 //渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
 }
 </script>
</html>

로그인 후 복사

1. Scene Scene은 3차원 공간입니다. [Scene] 클래스를 사용하여 [scene]이라는 객체를 선언합니다.

2. 위 경우의 PerspectiveCamera 원근 카메라에 대한 주의사항

1. 카메라의 기본 관찰 방향은 음의 z축 방향(즉, 화면을 향하는 것)입니다. )이므로 좌표가 변경되면 카메라를 원점으로 향하여 물체를 관찰합니다.

2. LookAt 메소드를 사용하여 카메라 화각의 중심을 설정합니다. "lookAt()"의 매개변수는 중심좌표 "x", "y", "z"를 속성에 포함하는 객체입니다.

3. 케이스에는 원근 카메라를 사용했습니다(시점에서 가까울수록 크게 보이고, 멀리 있는 물체는 작게 그려집니다). 이는 우리가 물체를 보는 방식과 일치합니다. )

4. 카메라의 위쪽 방향을 양의 y축으로 설정합니다.camera.up.x = 0; //카메라 방향--상단 방향; 카메라의 y축 카메라입니다.up. z = 0;

camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;

로그인 후 복사

3. 원근 카메라 관련 매개변수 설명

new THREE.PerspectiveCamera(fov, Aspect, Near, Far ) 원근 카메라

시야각: fov 시야각(어떤 곳에서는 촬영 거리라고도 함)이 클수록 장면의 개체가 작아집니다. 시야각이 작을수록 장면의 개체가 커집니다.

화면 비율: 화면

카메라 거리 뷰 볼륨에 대한 가장 가까운 거리: Near

카메라에서 뷰 볼륨까지의 가장 먼 거리: 원거리

Three.js의 기본 사항 알아보기

Three.js의 기본 사항 알아보기 위 사례 애니메이션 원리: 카메라는 y축을 중심으로 회전하며, 촬영된 사진은 장면의 물체를 유지합니다. 카메라에 의해 실시간으로 브라우저에 배치되어

function animation(){
 //相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
 //实时渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
}

로그인 후 복사

4. 렌더러 3차원 공간의 객체를 2차원 평면에 매핑하는 과정을 3차원이라고 합니다. 표현. 일반적으로 우리는 렌더링 작업을 렌더러라고 부릅니다.

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이라도 도움이 되었으면 좋겠습니다. 또한 PHP 중국어 사이트가 더 많아졌으면 좋겠습니다.

Three.js의 기본 학습과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!