3.JS로 3D 객체를 녹이는 방법

Sep 14, 2025

어떻게

우리가 알고있는 웹은 끊임없이 변화하고 진화하고 있습니다. 몇 년 전에 또 다른 차원을 획득 한 것처럼 보이지 않는 것처럼 보이지 않는 것처럼 보이지 않는 것처럼 보입니다. A. 웹 사이트 빌더 , 한때 과학 소설 영화 시각 효과의 일부는 이제 소파에 누워있는 태블릿에서 가능하며 실제로 전체 전체 화면 Chrome Windows의 대규모 대화 형 설치로 다루는 건물이 있습니다.

아래 단계에 따라 3.js로 현실적인 녹는 효과를 만드는 방법을 알아보십시오.

01. 3.JS 장면을 설정하십시오

앞으로 나아가 세 .js 라이브러리를 잡고 사이트에 포함시킵니다. WebGlRenderer, Scene 및 PerspectiveCamera를 인스턴스화해야합니다. 이들이 인스턴스화 된 후에 장면을 렌더링해야합니다. requestanimationframe. ...에

02. 장면에 조명을 추가합니다

다음으로 조명을 3D 장면에 추가해야합니다. 이 예제에서는 주변 조명과 점의 빛을 사용합니다. 주변 표시등은 장면을위한 전반적인 글로벌 색상으로 사용되지만 점등은 거리를 가질 수있는 빛을 방출합니다. 이것은 장면에 어떤 대조를 줄 것입니다.

 VAR Ambientlight = New Three.ambientlight (0xccccccccccccccccccccccccccccccccc);
Scene.add (Ambientlight);
var pointlight = new three.pointlight (0xFFFFFF, 1);
pointlight.position.set (10, 5, 0);

03. 3D 모델을로드하십시오

이제 장면이 설정되었으므로 3D 모델을로드해야합니다. 지원되는 형식 (JSON, OBJ, DAE 등)을 사용하여 모델을로드 할 수 있습니다. 다음은 DAE 모델을로드하는 예제입니다. 이 예제에서는 모델에 정점 수정을 수행하기에 충분한 다각형이있는 것이 매우 중요합니다.

이 예에서 사용되는 사슴 두개골은 3,500 개의 폴리가 있습니다. 폴리 횟수가 너무 낮 으면 버텍스 애니메이션이 너무 명시적이고 왜곡됩니다.

 loader = new three.colladaloader ();
loader.load ( 'DAE / DEER_SKULL / DEER_SKULL.DAE', OnloadCompleteHandler);

04. 범프 맵을 추가하십시오

범프지도는 저비용으로 텍스처에 깊이를 추가하는 데 적합합니다. 범프 맵 이미지를 만든 후에는 아래와 같은 자료에 단순히 적용하여이를 구현할 수 있습니다. 또한 모델의 규모에 맞게 범프 맵의 배율을 조정해야합니다.

 material.bumpmap = 'img / deer_skull / deer-bump.jpg';
material.bumpscale = .008;

05. 정점 애니메이터를 사용하십시오

Johnny는 그의 사이트를 통해 Jerome Etienne의 Game Etienne의 게임 확장을 사용하여 정점 애니메이션을보다 쉽게 수행 할 수 있습니다. 이 확장 프로그램은 프레임 속도로 모델의 각 꼭지점에 쉽게 액세스 할 수 있으므로 파형을 사용하여 정점을 직접 조작 할 수 있습니다.

그만큼 버텍스 애니메이션 확장자 Etienne의 Github을 통해 제공됩니다. 우리는 다음 단계에서 어떻게 사용되는지 더 나아갈 것입니다.

Users can interact with the 3D model and view from multiple angles — 사용자는 3D 모델과 상호 작용하고 여러 각도에서 볼 수 있습니다.

06. 녹는 것을 시작하십시오

지오메트리를 녹는 것은 몇 가지 전체 단계를 포함합니다. 첫째, 각 점은 계속해서 아래쪽으로 밀어졌습니다. 점이 땅에 도달하면 '푸시 벡터'라고 부를 것인지를 사용하여 바깥쪽으로 푸시됩니다.

다음으로, 녹은 기하학이 완전히 평평하지 않도록 두께를 따라 모이는 점을 줄 것입니다. 이를 달성하기 위해 Johnny는 Houdini의 Skeel Lee의 VFX 쉐이더에서 코드를 이식하여 수정했습니다.

07. 정점을 아래쪽으로 움직이기 시작합니다

다음은 버텍스 애니메이터를 사용하여 모델의 기하학적 구조를 지상쪽으로 지속적으로 밀어 넣는 예시적인 사용법입니다.

 VAR vertexAnimation = New threex.vertexanimation (기하학, 기능 (원점, 위치, 델타, 지금) {position.y - = meltamount * modelHeight;}

이것은 포인트가 멜 탐지 ...에 렌더링주기에서 버텍스 애니메이션에서 '업데이트'를 호출하는 것을 잊지 마십시오.

08. 푸시 벡터를 결정합니다

지점이 땅에 도달하면 용융 효과를 얻기 위해 외부로 밀어 넣어야합니다. 아래 코드는 X 및 Z 축의 방향이 균일 한 변위를 얻을 수 있도록 버텍스를 누를 방향을 결정합니다. 조건부는 모델 (그라운드)의 가장 낮은 경계에 도달 한 포인트 만 밖으로 푸시하는 것을 보장합니다.

if (position.yy & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). 추가 (bbox.min.clone ()). Dividescalar (2.0);
pushvector = position.clone (). 서브 (중심);
pushvector.y = 0; }

09. 녹아서 자연스럽게 느끼게하십시오

아래 코드는 노이즈를 사용하여 이동에서 무작위 성을 생성하므로 용융물이 유기적으로 느껴집니다. 소음 변수를 조정하여 원하는 효과를 얻을 수 있습니다. 그런 다음 소음이 밀어 넣기 벡터에 적용됩니다. 멜 탐지 과 스프레드 녹은 풀의 속도와 크기를 제어합니다. 이 바깥 쪽 벡터는 최종적으로 계산 된 다음 정점 자체에 적용됩니다.

 var n = noiseamplite * generator.getVal ((position.x) * noiseFrequency + NoiseOffset);
var outwardvector = pushvector.multiplyscalar (((meltamount * spelsamount) + n) * 외부 스피드);
Position.add (외출 증귤);

10. 녹은 풀 두께를하십시오

지금까지 설명 된 코드는 용융 효과를 달성 할 것이지만 두 가지가 잘못되었습니다. 첫째, 모든 포인트가 동일한 y 위치로 녹이기 때문에 수영장이 평평하게 느낄 것입니다. 둘째, 모든 것이 동일한 y를 공유하기 때문에 너무 많은 점이 같은 높이로 쌓여 깜박 할 수 있습니다. 이를 방지하려면 용융 속도로 두께가 적용됩니다.

 위치 .Y + = meltamount * poolthickness;

11. 다른 모델에서 시도해보십시오

위의 코드를 사용하면 충분한 다각형이있는 모든 모델을 녹일 수 있습니다. 코드를 Zip 파일 다운로드하십시오 여기 그리고 당신이 좋아하는 것을 가지고 모델을 교환하십시오. 재미있어!

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

관련 기사:

Three.js로 대화 형 3D 비주얼을 만듭니다
웹 디자이너를위한 최고의 컬러 도구
웹 디자인의 최첨단을 조심하십시오

3.JS로 3D 객체를 녹이는 방법

01. 3.JS 장면을 설정하십시오

02. 장면에 조명을 추가합니다

03. 3D 모델을로드하십시오

04. 범프 맵을 추가하십시오

05. 정점 애니메이터를 사용하십시오

06. 녹는 것을 시작하십시오

07. 정점을 아래쪽으로 움직이기 시작합니다

08. 푸시 벡터를 결정합니다

09. 녹아서 자연스럽게 느끼게하십시오

10. 녹은 풀 두께를하십시오

11. 다른 모델에서 시도해보십시오

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

라이온을 그리는 방법

예술에서의 foresortening의 필수 가이드

JavaScript 코드 분할에 대해 알아야 할 모든 것

Three.js를 사용하여 WebGL 시작하기

VR 창조물을 개선하기위한 5 가지 팁

연필로 맛있는 텍스처를 만드는 방법

Photoshop CC에서 멍청한 스타일 초상화 페인트

야생 서쪽 트위스트로 만화를 만드는 방법

카테고리