3.js와 대화 형 3D 비주얼을 생성

Sep 12, 2025

어떻게

이 WebGL 자습서는 CO2 레벨이 변경되는 것으로 전 세계적으로 일어나는 일을 보여주는 3D 환경 시뮬레이션을 만드는 방법을 보여줍니다. (더 많은 것을 볼 수 있습니다 WebGL 실험 여기.)

사용자는 HTML 입력 범위 슬라이더를 사용하여 레벨을 제어합니다. 사용자가 더 많은 CO2를 추가 할 때, 더 많은 스모그가 장면에 나타날 것입니다. 온도의 증가가 더 많은 극성 얼음 캡이 녹을수록 물 수준이 발생하면 나무가 물에 담그면 나무가 사라집니다.

요소는 트위닝 라이브러리를 사용하여 애니메이션이며 반대 방향으로 슬라이더를 드래그하면 효과가 뒤집습니다. 그것이 실제 생활에서 쉽게 그 밖에 쉽지 만!

01. 표시 요소를 표시합니다

The basic layout of the page is shown here before the 3D scene has been added. The image is a transparent PNG at the top of the screen and there is a range slider at the bottom — 3D 장면이 추가되기 전에 페이지의 기본 레이아웃이 여기에 표시됩니다. 이미지는 화면 상단의 투명한 PNG이며 바닥에 범위 슬라이더가 있습니다.

프로젝트를 시작하려면 코드 IDE에서 '시작'폴더를 엽니 다. 개방 index.html. 이미 몇 가지 코드가있는 기본 페이지 비계가 표시됩니다. 본문 섹션에서 3D 콘텐츠에 대한 인터페이스로 사용될 디스플레이 요소를 추가하십시오.

& lt; div id = "헤더"& gt; & lt; img src = "img / co2.png"id = "배지"& gt; & lt; / div & gt; & lt; div id = "내부"& gt; & lt; input class = "슬라이드"type = "범위"min = "0"max = "7"step = "1"값 = "0"onInput = "showval (this.value)"& gt; & lt; p & gt; 슬라이더를 드래그하여 CO2

02. 라이브러리를 연결합니다

3D 콘텐츠가 3.js를 통해 표시되고 여기에 포함되어 있습니다. 콜라 다 모델이 나중에 장면에 추가됩니다. 이를로드 할 추가 라이브러리는 기본 트윈 라이브러리와 함께 포함됩니다. 다음 줄은 모든 링크가 마무리 폴란드어를 추가하는 처리 효과를 게시합니다.

& lt; script src = "js / three.min.js"& gt; & lt; / script & gt; & lt; scrc = "js / colladaloader.js"& gt; & lt; / script & gt; & lt; scrc = "js / tween.min.js"& gt; & lt; / script & gt; & lt; script src = 'js / postprocessing / effectcomposer.js'& gt; & lt; / script & gt; & lt; script src = 'js / postprocessing / renderpass.js'& gt; & lt; / script & gt; & lt; script src = 'js / postprocessing / shaderpass.js'& gt; & lt; / script & gt; & lt; script src = 'js / postprocessing / maskpass.js'& gt; & lt; / script;

03. 게시물 처리 쉐이더

장면이 각 프레임을 렌더링 한 후 여러 개의 포스트 프로세스 효과가 추가됩니다. 이것들은 화면의 상단과 하단의 틸트 시프트 흐림 효과, 마침내 vignette가 화면의 가장자리로 퇴색하는 라이브러리입니다.

04. 변수를 추가합니다

일부 코드가 완료되었습니다. 나머지 자습서의 코드를 추가 할 수있는 의견이 표시됩니다. 화면 해상도, 다양한 3D 모델 및 사후 처리를 돌보는이 3D 장면에서 여러 변수가 사용됩니다. 두 가지 중요한 변수가 있습니다 워터트 물 높이와 그 최신전 슬라이더의 마지막 위치를 기억합니다.

 var screen_width = window.innerWidth, screen_height = window.innerHeight,
 mousex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, 카메라, 장면, 렌더러, 물, waterht = 1;
var textureLoader = new three.textureLoader ();
VAR 작곡가, shadertime = 0, 필름 패스, renderPass, copypass, 효과 방지, 그룹, lastval = 0;

05. 장면 초기화

init 함수는 코드의 상당 부분이며 장면이 처음에 올바른 모양으로 설정되도록합니다. 컨테이너가 페이지에 추가되며 이는 3D 장면이 표시됩니다. 카메라가 추가되고 일부 배경 안개가 거리를 퇴색시킵니다.

 함수 init () {
  var container = document.CreateEllement ( 'div');
  Document.Body.AppendChild (컨테이너);
  카메라 = 새로운 3.PerspectiveCamera (75, screen_width / screen_height, 1, 10000);
  camera.position.set (2000, 100, 0);
  장면 = 새로운 3.scene ();
  scene.fog = new three.fogexp2 (0xB6D9E6, 0.0025);
  renderer = new three.webglrenderer ({
  antialias : true.
  });

06. 렌더러 설정

렌더러에는 배경색이 주어졌으며 해상도는 화면의 픽셀 비율과 동일한 크기로 설정됩니다. 장면에서 그림자가 활성화되어 있으며 컨테이너 요소의 페이지에 배치됩니다. 반구 빛이 추가되어 하늘과 접지 색이 있습니다.

renderer.setClearColor (0xADC9D4);
renderer.setPixelRatio (window.devicePixElratio);
renderer.setsize (screen_width, screen_height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
container.appendchild (renderer.domelement);
var light = new three 3.Hemispherelight (0xA1E2F5, 0x6F4D25, 0.5);
Scene.add (빛);

07. 쉐이더 변수

쉐이더 게시물 프로세스 효과를 제어 할 변수는 여기에 값이 부여됩니다. 이러한 변수는 나중에 사용하여 외모를 제어 할 값을 추가합니다. Params 함수를 보면 이미 완료된이 정보가 표시됩니다.

 RenderPass = New 3.RenderPass (장면, 카메라);
hblur = new three 3.ShaderPass (3.Horizontalttshiftshader);
VBLUR = NEW 3.SHADERPASS (3.TrueCltiltShiftShader);
FilmPass = New 3.ShaderPass (3.FilmShader);
EffectVignette = New 3.ShaderPass (3.VignetTeshader);
copypass = 새로운 3.ShaderPass (3.CopyShader);

08. 효과 작성

효과는 효과 작곡가라고 불리는 무언가로 쌓여 있어야합니다. 이것은 각 효과를 가져 와서 스타일링을 적용합니다. 그런 다음 렌더링 기능이 나중에 추가 될 때 표시되는 화면의 최종 장면으로 모두 표시됩니다.

09. 클라우드 이미지로드

The params() function is called in step 9, which sets the parameters for the post processing vignette and film grain effect — params () 함수는 Post Processing vignette 및 필름 곡물 효과의 매개 변수를 설정하는 단계 9에서 호출됩니다.

그만큼 매개 변수 함수가 호출되며 게시물 효과의 개별 매개 변수를 설정합니다. 새 그룹이 만들어지고 이는 객체 그룹을 쉽게 회전시킬 수 있도록 그 안에 모든 장면 콘텐츠를 보유 할 수 있습니다. 투명한 PNG 이미지는 장면 내의 스프라이트로 사용될 구름 재료로로드됩니다.

 params ();
  그룹 = 새로운 3. 그룹 ();
  Scene.add (그룹);
  var cloud = textureLoader.load ( "img / cloud.png");
  재질 = 새로운 3.PRITEMATERIAL ({
  지도 : 클라우드, 불투명도 : 0.6, 색상 : 0x888888, 안개 : 사실
});

10. 루프를 위해 더블

8 개의 그룹이 첫 번째 내부에서 생성됩니다 ...에 대한 고리. 이 8 개의 그룹 모두 모두 35 개의 구름이 두 번째 루프에서 추가됩니다. 각 구름은 장면 위의 임의의 위치에 배치됩니다. 사용자가 시각화 할 때 SMOG를 표시하고 제거 할 사용자가 슬라이더로 그룹을 켜고 끌 수 있습니다.

(j = 0; J & lt; 8; J ++) { var g = new 3.Group (); (i = 0; i <35, i ++) { var x = 400 * math.random () - 200; var y = 60 * math.random () + 60; var z = 400 * math.random () - 200; Sprite = New Three.Sprite (재료); sprite.position.set (x, y, z);

11. 구름을 확장합니다

The first group of clouds can be seen in the scene. The others are hidden and will be visible when controlled from the slider by the user — 구름의 첫 번째 그룹은 장면에서 볼 수 있습니다. 다른 사람들은 숨겨져 있으며 사용자가 슬라이더에서 제어 할 때 볼 수 있습니다.

클라우드는 장면에서 볼 수있는 크기로 확장됩니다. 첫 번째 그룹 이후의 모든 클라우드 그룹은 렌더러가 거의 보이지 않도록 확장됩니다. 이것은 그들이 나중에 그들을 전체 크기로 다시 확대하여 가시적이게 될 것입니다. 이것은 좋은 트위닝 효과를 줄 것입니다.

12. 모델로드

이제 Collada 로더가로드되도록 설정됩니다 장면 모델. 로딩이 완료되면 모델이 스캔되고 그림자를 던지고 그림자를 던지고 그림자를 수신하여 장면에 추가 깊이를 제공하도록 메쉬가 발생합니다.

 VAR Loader = New 3.CollAdaloader ();
loader.options.convertupaxis = true;
loader.load ( 'scene.dae', 함수 (collada) {
  var dae = collada.scene;
  DAE.Traverse (기능 (기능) {
  if (Child Instanceof three.mesh) {
  child.castshadow = true;
  child.receiveshadow = true;
  }
});

13. 장면에서 특성을 찾는 것

이제 모델이 디스플레이 준비가되면 장면에 맞게 올바른 크기로 설정됩니다. 코드는 물 모델이 장면에서 발견되고 전역 변수로 전달되도록 물의 높이를 구체적으로 제어해야합니다. 마찬가지로 주요 빛을 찾아야하므로 프로젝트 그림자로 설정할 수 있습니다.

DAE.Scale.x = DAE.Scale.y = DAE.Scale.z = 0.5; DAE.UpdateMatrix (); group.add (DAE); Water = Scene.getObjectByName ( "물", 참); 물 = 물. 샴페인

; light = scene.getObjectByName ( "splight", true); 빛 = light.children

;

14. 라이트 설정

The model has been added with the main light set to emit shadows onto the scene. There is something substantial to look at in the scene so the tilt shift blur effect can be seen at the front and back of the scene — 모델이 주요 표시등이 첨가되어 장면에 그림자를 방출합니다. 장면에서 볼 수 있도록 상당한 무언가가 있으므로 틸트 시프트 흐림 효과가 장면의 앞뒤에서 볼 수 있습니다.

이제 Spotlight가 발견되면 장면으로 그림자를 던지게하는 세부 사항이 설정됩니다. 그 자리의 가장자리에서 빛의 페이딩도 여기에서 설정됩니다. 마지막으로 모델이로드하는 가장 큰 요소 이므로이 코드가 실행되기 전에 나머지 장면이 설정되므로 렌더링 함수를 각 프레임이라고 할 수 있습니다.

 light.target.position.set (0, 0, 0);
  light.castshadow = true;
   light.shadow = new three.lightshadow (새로운 3.PerspectiveCamera (90, 1, 90, 5000));
  light.shadow.bias = 0.0008;
  light.shadow.mapsize.width = 1024;
  light.shadow.mapsize.height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  세우다();
});

15. 마지막 초기화 코드

With the mouse and touch events set up, the scene becomes reactive to the mouse movement, zooming in and out while being able to tilt the scene up and down — 마우스와 터치 이벤트가 설정되면 장면이 마우스 이동에 반응하여 장면을 위아래로 기울이면서 확대 / 축소됩니다.

init 함수의 마지막 부분은 카메라를 위치에 따라 움직이는 다양한 마우스와 터치 입력을 설정합니다. 이벤트는 화면이 크기가 조정되어 있고 렌더링 된 디스플레이를 업데이트하는 경우 수신 대기하도록 등록됩니다.

 document.addeventListener ( 'mousemove', ondocumentmousemove, false);
  document.addeventListener ( '터치 스타트', OnDocumentTouchStart, false);
  document.addeventListener ( 'TouchMove', OnDocumentTouchMove, false);
  window.addeventListener ( '크기 조정', onWindowResize, false);
}

16. 각 프레임을 렌더링합니다

브라우저가 관리 할 수 있으므로 렌더링 함수가 초당 60 프레임에 가깝게 호출되도록 설정됩니다. 모든 모델을 포함하는 그룹은 각 프레임을 소량으로 회전하도록 설정됩니다. 카메라의 위치는 마우스 또는 터치 입력에서 업데이트되며 장면의 중심을 계속 찾습니다.

17. 디스플레이 업데이트

쉐이더 시간은 0.1 프레임이 0.1 인 변수이며 이는이 프레임으로 전달됩니다. 필름 패스 따라서 노이즈 필름 곡물을 업데이트 할 수 있습니다. 효과 작곡가가 업데이트되고 화면으로 렌더링됩니다. 마지막으로 트윈 엔진도 업데이트됩니다.

 shadertime + = 0.1;
  FilmPass.uniforms [ '시간']. 값 = shadertime;
  composer.render (0.1);
  tween.update ();
}

18. 사용자 입력 가져 오기

1 단계에서 추가 된 입력 범위 슬라이더는 쇼 비행 여기에 정의 된 기능. 사용자 가이를 클릭하면 슬라이더가 이동되었는지 확인합니다. 이동하면 다음 클라우드 그룹이 0.8 초 이상 트윈으로 확장됩니다. 물 높이가 업데이트되며 이것은 새로운 높이까지 트위닝됩니다.

 기능 쇼빙 (VAL) {
  if (val! = lastval) {
  if (val & gt; listval) {
  새로운 tween.tween (group.children [val] .scale) .TO ({x : 1, y : 1, z : 1}, 800). feasure (tween.exting.quadratic.inout) .start ();
  워터 + = 0.07;
  새로운 tween.tween (water.scale) .TO ({y : waterht}, 800). feasure (tween.exting.quadratic.inout) .start ();

19. 나무들을 잡아라

온도 변수는 장면에서 제거 해야하는 트리 그룹의 현재 그룹을 찾아 y 축에서만 트윈으로 축소합니다. 이 스프링이 즐거운 효과를 얻으려면 화면에서 시야가 없도록 탄력적 인 완화가 사용됩니다. 더 많은 물과 구름이 현장에 있기 때문에 나무가 사라집니다.

20. 반대의 입력

첫 번째 콘텐츠는 슬라이더가 위쪽으로 또는 오른쪽으로 미끄러 졌는지 확인했습니다. 이제 코드는 왼쪽으로 슬라이딩 사용자를 감지합니다. 구름은 트윈으로 크기가 조정되어 지구상에 냉각 효과를 나타내는 수위가 있습니다.

 새로운 tween.tween (group.children [lastval] .scale) .TO ({x : 0.001, y : 0.001, z : 0.001}, 800). Fester (tween.exting.quadratic.inout) .Start ( );
Waterht - = 0.07;
새로운 tween.tween (water.scale) .TO ({y : waterht}, 800). feasure (tween.exting.quadratic.inout) .start ();

21. 마무리

With everything working, you can see the background fog clearly as you move the mouse so that the camera gets a higher vantage point on the scene — 모든 일이 일어나면 카메라가 장면에서 더 높은 유리한 지점을 얻을 수 있도록 마우스를 움직일 때 배경 안개를 명확하게 볼 수 있습니다.

마지막 단계는 나무를 다시 가져 오는 것입니다. 따라서 탄력있는 트윈으로 원래 크기로 다시 조정됩니다. 장면을 저장하고 자신의 컴퓨터 또는 웹 서버에서 로컬로 호스팅되는 서버에서 웹 페이지를보십시오. Scene Display를 변경하기 위해 마우스 이동과 슬라이더와 상호 작용할 수 있습니다.

이 기사는 원래 나타났습니다 웹 디자이너 문제 265. 그것을 구입하십시오 여기 ...에

3.js와 대화 형 3D 비주얼을 생성

01. 표시 요소를 표시합니다

02. 라이브러리를 연결합니다

03. 게시물 처리 쉐이더

04. 변수를 추가합니다

05. 장면 초기화

06. 렌더러 설정

07. 쉐이더 변수

08. 효과 작성

09. 클라우드 이미지로드

10. 루프를 위해 더블

11. 구름을 확장합니다

12. 모델로드

13. 장면에서 특성을 찾는 것

14. 라이트 설정

15. 마지막 초기화 코드

16. 각 프레임을 렌더링합니다

17. 디스플레이 업데이트

18. 사용자 입력 가져 오기

19. 나무들을 잡아라

20. 반대의 입력

21. 마무리

어떻게 - 가장 인기있는 기사

Photoshop의 스토리 보드 방법

Chiaroscuro Art : 단계별 가이드

Zbrush에서 3D 및 만화물을 결합하는 방법

원격 팀을위한 마스터 버전 제어

엑스포로 출발을 점프하십시오

Houdini에서 놀라운 풍경을 만듭니다

프로젝트 펠릭스가있는 2D 디자인을 3D로 바꾸십시오

underpainting과 최선의 사용 방법을 발견

카테고리