three.js => 텍스처 및 재료

소개

소재와 질감에 대한 좋은 소개.

확산, 범프, 반사 및 투명 텍스처

매개 변수

매개 변수	세부
색깔	색상의 RGB 구성 요소의 숫자 값입니다.
강렬	빛의 강도 / 강도의 수치 값입니다.
fov	카메라 frustum 수직 시야.
양상	카메라 절두체 종횡비.
가까운	비행기 근처 카메라 frustum입니다.
멀리	카메라 frustum 멀리 비행기입니다.
반지름	구면 반경. 기본값은 50입니다.
widthSegments	수평 세그먼트 수. 최소값은 3이고 기본값은 8입니다.
heightSegments	수직 세그먼트 수. 최소값은 2이고 기본값은 6입니다.
피 스타트	수평 시작 각을 지정하십시오. 기본값은 0입니다.
phiLength	수평 스윕 각도 크기를 지정하십시오. 기본값은 Math.PI * 2입니다.
시타 스타트	수직 시작 각을 지정하십시오. 기본값은 0입니다.
thetaLength	수직 스윕 각 크기를 지정하십시오. 기본값은 Math.PI입니다.

비고

데모 링크

지구 모델 만들기

이 예제의 텍스처는 http://planetpixelemporium.com/planets.html 에서 사용할 수 있습니다.

설치 또는 설정

npm을 통해 3 개를 설치할 수 있습니다.

npm install three

또는 HTML 페이지에 스크립트로 추가하십시오.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML :

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <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 );

구체 만들기

구체의 지오메트리 생성
퐁 소재 만들기
3D 객체 만들기
장면에 추가하십시오.

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

확산 텍스처 추가

확산 텍스처는 표면의 주 색상을 설정합니다. 구형에 적용하면 다음과 같은 이미지를 얻습니다.

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

범프 맵 텍스처 추가하기

각 픽셀은 표면의 높이 역할을합니다.
산들은 그들의 그림자 덕분에 더욱 분명하게 나타납니다.
bumpScale 매개 변수를 사용하여지도가 조명에 미치는 영향을 변경할 수 있습니다.
범프 맵을 사용하기 위해 여분의 꼭지점이 생성되거나 필요하지 않습니다 (변위 맵과 달리)

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

특수 텍스처 추가하기

텍스처가있는 객체의 'shininess'를 변경합니다.
각 픽셀은 specularity의 강도를 결정합니다.
이 경우, 물은 지구보다 빛을 반사하기 때문에 바다 만이 정반사입니다.
specular 매개 변수를 사용하여 반사 색상을 제어 할 수 있습니다.

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

클라우드 레이어 추가

캔버스를 사용하여 canvasCloud 를 만들고 텍스처로 사용합니다.
jpg가 알파 채널을 처리하지 않기 때문에이 작업을 수행합니다. (그러나 PNG 이미지는 않습니다)
다음 이미지를 기반으로 텍스처를 작성하는 코드를 작성해야합니다.

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

우리는 cloudMesh 을 earthMesh 십시오. cloudMesh 가 함께 움직일 것입니다.
우리는 depthWrite 비활성화하고 depthWrite 를 설정합니다 transparent: true 를 지정하면 클라우드 메시가 투명 해집니다.
우리는 양쪽을 THREE.DoubleSide 설정하여 양측을 볼 수있게합니다.
- 이렇게하면 지구 가장자리에 아티팩트가 생기는 것을 피할 수 있습니다.
마지막으로 opacity: 0.8 로 설정하여 구름을 더 반투명하게 만듭니다.

회전 운동 추가

렌더 루프에서 단순히 회전을 늘립니다.

마지막으로 클라우드 레이어를보다 사실적으로 보이게하기 위해 애니메이션 레이어를 애니메이션화합니다.

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

three.js
텍스처 및 재료

수색…

소개

매개 변수

비고

지구 모델 만들기