ThingJS 입자 필터 원 클릭 으로 비/눈 효과 구현

ThingJS 를 사용 하면 입자 효 과 를 신속하게 작성 할 수 있 습 니 다.예 를 들 어 비,눈(눈 크기 조절 가능),분수,화염 효과 등 이 있 습 니 다.심지어 제3자 의 데 이 터 를 연결 하여 3 차원 장면 의 효 과 를 실시 간 으로 제어 할 수 있 습 니 다(예 를 들 어 날씨 인터페이스 연결).
1.입자 효과
ThingJS 는 입자 효 과 를 실현 하기 위해 Particle System 물체 류 를 제공 합 니 다.스스로 입자 효 과 를 만 드 는 데 는 이미지 처리,코드 쓰기,3D 렌 더 링 이 필요 하 며 매우 어 려 운 임무 입 니 다.대량의 3D 알고리즘 지식 을 습득 하고 shader 언어 도 습득 해 야 합 니 다.ThingJS 는 입자 효과 의 실현 방법 을 봉 하여 코드 양 과 개발 투 자 를 줄 이 고 3D 개발 초보 자 들 에 게 인기 가 많 으 며 query 로 API 인 터 페 이 스 를 직접 조회 하여 장면 에 화염 효 과 를 넣 었 다.
ThingJS 내 장 된 일부 입자 효 과 는 직접 호출 할 수 있 으 며,온라인 개발 을 클릭 하여 코드 블록 을 선택 하여 호출 할 수 있 습 니 다.
2.필드 불 러 오기
CampusBuilder(일명 모델 링)구축 장면 이 완 료 된 후 ThingJS 에서 url 을 직접 불 러 와 2 차 개발 을 진행한다.

//        
var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse' //     
});

3.서로 다른 입자 효과 실현
화염 효과

코드 는 다음 과 같 습 니 다:

/**
 *             
 */
function createFire() {
 resetAll();
 //     
 var particle = app.create({
 id: 'fire01',
 type: 'ParticleSystem',
 name: 'Fire',
 parent: app.query('car01')[0],
 url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',
 localPosition: [0, 0, 0] //              
 });
}

눈 효과

코드 는 다음 과 같 습 니 다:

/**
 *             
 */
function createSnow() {
 resetAll();
 //       
 var particleSnow = app.create({
 type: 'ParticleSystem',
 id: 'No1234567',
 name: 'Snow',
 url: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles',
 position: [0, 50, 0]
 });
}

분수 효과

코드 는 다음 과 같 습 니 다:

/**
 *             
 */
function createWater() {
 resetAll();
 //       
 var particle = app.create({
 id: 'water01',
 type: 'ParticleSystem',
 name: 'Water',
 url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles',
 position: [0, 0, 5]
 });
}

강우 효과

코드 는 다음 과 같 습 니 다:

/**
 *             
 */
function createByParticle() {
 resetAll();
 //     
 var particle = app.create({
 type: 'ParticleSystem',
 name: 'Rain',
 url: 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles',
 position: [0, 300, 0],
 complete: function (ev) {
 ev.object.scale = [10, 10, 10];
 }
 });
 //         
 particle.setGroupAttribute('maxParticleCount', 1000);
 //         
 particle.setParticleAttribute('particleCount', 500);
 
}

비 와 눈 이 내 리 는 날 씨 는 입자 사진 렌 더 링 을 통 해 이 루어 집 니 다.우 리 는 입자 수의 최대 밀도 와 최소 밀 도 를 조절 하여 비 와 눈 이 내 리 는 크기 를 실현 할 수 있 습 니 다.
입자 제거 효과

function resetAll() { //            var particle = app.query('.ParticleSystem'); //             if (particle) { //   ，          particle.destroy(); } }

끝:
ThingJS 가 사물 인터넷 을 대상 으로 하 는 3D 시각 화 개발 플랫폼 은 강력 한 사물 인터넷 개발 논 리 를 가지 고 있 으 며,ThingJS 는 시각 화 응용 에 간단 하고 풍부 한 기능 을 제공 하 므 로 기본 적 인 Javascript 개발 경험 만 있 으 면 시작 할 수 있다.사용 자 는 플랫폼 api 에 접속 하여 3D 시각 화 인터페이스 를 쉽게 통합 하고 장면 구축-온라인 개발-데이터 도 킹-프로젝트 배 치 를 통 해 개발 을 더욱 효율 적 으로 합 니 다!
이상 은 ThingJS 입자 특수효과 원 클릭 으로 비 와 눈 효 과 를 실현 하 는 상세 한 내용 입 니 다.ThingJS 의 비 와 눈 효과 실현 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!