공지

업데이트 버전: 2.2.1.14.183.a 

[new ] 업데이트 버전: 2.2.1.14.183.b

► 2.2.1.14.183.b 버전 수정 내용 

-  [U3dOveraly] setDraggable 메서드 사용 시 파라미터가 false 여도 드래그가 되는 오류 수정되었습니다. 

- setDraggabl(false) 후 연결선이 정상적으로 초기화되지 않는 오류 수정되었습니다. 

업데이트 내용:

1. Three.js 버전이 업데이트 되었습니다.

- 182 버전에서 183 버전으로 업데이트 되었습니다

2. U3dPatternXYZLayer의 지형 데칼 출력 기능이 추가되었습니다.

- 출력 성능이 향상되었습니다.

- 지형에 데칼 출력 기능이 추가되었습니다.

*레이어 기본 설정

pattern: {
    name: 'pattern'  //+ 레이어 이름, defaultValue(opt.naem, Guid()) : 임의의 문자열을 생성하는 함수. @return {string}
    //,baseurl: 'sample/img/tile_rock.jpg' //+ 패턴 텍스쳐 URL
    ,baseurl: 'default' //+ 'default' 입력 시, 내부 기본 패턴 텍스쳐 사용
    ,alphabaseurl: 'sample/img/alphaSample.jpg' //알파 텍스쳐 url
    ,isConvertGrayScale : true //사용할 알파 텍스쳐 이미지의 그레이 스케일을 알파값으로 변환해야되는지 여부, 흑백 jpg로 된 이미지는 필수적으로 사용해야함
    ,usebasetexture : true //  패턴 텍스쳐 출력 여부
    ,usealphatexture : false // 알파 텍스쳐 출력 여부
    ,color: 0xffffff //+ 레이어 색상 입력
    ,opacity : 1.0  //레이어 투명도 입력, 데칼의 투명도랑 별개로 작동함
}
const pattrenLayer = GeOnDT.image.U3dPatternXYZLayer(this.options);

출력 지형 전체에 대한 출력, usealphatexture: false(알파텍스쳐 미 사용)

출력 지형 전체에 대한 출력, usealphatexture: true (알파텍스쳐 사용)

*레이어 기본 설정 + 데칼 출력 설정
pattern: {
    name: 'pattern'  //+ 레이어 이름, defaultValue(opt.naem, Guid()) : 임의의 문자열을 생성하는 함수. @return {string}
    //,baseurl: 'sample/img/tile_rock.jpg' //+ 패턴 텍스쳐 URL
    ,baseurl: 'default' //+ 'default' 입력 시, 내부 기본 패턴 텍스쳐 사용
    ,alphabaseurl: 'sample/img/alphaSample.jpg' //알파 텍스쳐 url
    ,isConvertGrayScale : true //사용할 알파 텍스쳐 이미지의 그레이 스케일을 알파값으로 변환해야되는지 여부, 흑백 jpg로 된 이미지는 필수적으로 사용해야함
    ,usebasetexture : true //  패턴 텍스쳐 출력 여부
    ,usealphatexture : false // 알파 텍스쳐 출력 여부
    ,color: 0xffffff //+ 레이어 색상 입력
    ,opacity : 1.0  //레이어 투명도 입력, 데칼의 투명도랑 별개로 작동함
    ,decalInfos:[ //데칼 설정
        {
            name: '데칼1번'
            decalArea:[
                {x:126.936,y:37.517}
                ,{x:126.935,y:37.517}
                ,{x:126.941,y:37.520}
                ,{x:126.939,y:37.514}
            ],
            textureUrl:'sample/img/tile.png', //데칼 텍스쳐
            alphaTextureUrl:'sample/img/alphaSample.jpg', //데칼 알파 텍스쳐
            isConvertGrayScale : true,
            patternStrength:2, //데칼 패턴 강도
            opacity:1.0,
            color: 0xff0000,
            minLevel:12,
            maxLevel:19
        },
        {
            decalArea:[
                {x:126.931,y:37.513}
                ,{x:126.929,y:37.510}
                ,{x:126.936,y:37.509}
                ,{x:126.941,y:37.512}
            ],
            opacity:1.0,
            textureUrl:'sample/img/tile.png',
            color: 0x00ff00,
            minLevel:12,
            maxLevel:19
        }
    ]
}

데칼 출력, 패턴 레어어 투명도 1.0

데칼 출력, 패턴 레어어 투명도 0.0 => 데칼만 출력

U3dPatternXYZLayer 관련 사용 법은 https://3d.geon.kr/doc/tutorial-official/singleImageLayer.html (패턴이미지 레이어 예제)  를 참고 해 주십시오.

3. U3dOverlay 출력 및 업데이트 성능이 향상되었고, drag 기능 지원 정책이 변경되었습니다.

- 반환객체 변경 

기존에는 getElement() 또는 element가 jQuery 객체를 반환했지만, 이제는 일반 x-x-javascript DOM Element를 반환합니다. 

따라서 기존처럼 .on(), .draggable() 등의 jQuery 메서드를 바로 사용할 수 없습니다.

jQuery 기능이 필요한 경우에는 $(element)로 감싸서 사용해야 합니다.

const element = view.getElement?.();  // 일반 x-x-javascript DOM Element를 반환
const $element = $(element);          // 제이쿼리 사용 시 한번 더 랩핑
$element.on('click', '.close', popUpCloseClick.bind(view)); 

- 드래그 사용법 변경 

드래그 처리 방식이 변경되었습니다. 

기존에는 overlay.getElement()로 가져온 객체에 .draggable()을 직접 호출했지만, 현재는 내부에서 jQuery 이벤트를 처리하지 않으므로 해당 방식은 동작하지 않습니다. 

드래그가 필요한 경우 새로 추가된 setDraggable(true) 메서드를 사용해야 하며, false를 전달하면 드래그가 비활성화됩니다.

[예시 코드]

기존 동작 --- 오류

function useDraggableOverlay(view) {
    const $div = view.getElement?.(); 
    $div.draggable();
    $div.css('height', $div[0].clientHeight);
}

변경 

view.setDraggable(true);

해당 변경사항은 UOverlay뿐 아니라 U3dView에도 동일하게 적용됩니다. 

따라서 view.element, view.getElement(), view.draggable() 등을 사용하는 기존 코드가 있다면 모두 수정이 필요합니다.

4. U3dLodModelLayer 출력 성능 향상 및 출력 제어 API 사용성이 개선되었습니다.

- U3dLodModelLayer 내용 및 사용 가이드는 https://3d-wiki.geon.kr/?page_id=126&vid=39(U3dLodModelLayer API 사용안내) 공지를 확인해주십시오.

5. U3dObjectBarrier 객체가 추가되었습니다.

 해당 객체를 통해 외곽선 강조 형상에 대한 출력 기능을 제공합니다.

외곽선 강조 형상 [배리어(Outline)] 스타일 기능 사용 방법을 아래와 같이 안내드립니다.

5.1. 배리어(outline) 스타일 기능 사용자 가이드

 배리어(Outline) 기능은 선택한 객체의 외곽선을 강조 표시하는 기능입니다.

모드에 따라 기본 강조, 펄스 효과, 흐름 애니메이션, 발광 효과 등을 적용할 수 있습니다.

관련 기능을 사용하기 위해 
시설물 상세 편집 및 실내환경 구성 예제 : https://3d.geon.kr/doc/tutorial-official/componentControlAtIndoor.html

해당 예제를 참고하여 주시기 바랍니다. 

해당 예제에서의 기능 사용 흐름은 다음과 같습니다. 

1. 대상 선택

2. [우측 객체 정보 패널] 스타일 탭 이동 

3. Outline 효과 활성화 

4. 모드 선택 / 스타일 설정

 모드별 옵션 설명

     각 모드에서 필요한 속성값들을 스타일 설정시에 해당 모드에 맞게 입력하시면 됩니다.

 괄호안에 숫자는 mode 속성값의 value로 지정하시면 됩니다. (예 : BOUNCE 모드 style  : { mode : 2 } )

1. BASIC 모드 (1) : 기본 외곽선 강조

테두리에 색상을 주어 강조 표현

[ BASIC 모드 형상 ]

2.BOUNCE 모드 (2) : 외곽선이 펄스(튀는 느낌)처럼 변화

 - bounceSpeed: 펄스 속도 조절

  → 값이 클수록 빠르게 변화합니다.

[ BOUNCE 모드 ]

3.FLOW 모드 (3) : 점선이 흐르는 애니메이션 효과

 - 점선 색상(dashColor): 흐르는 점선 색상

 - flowSpeed: 흐름 속도 

 - dashDensity: 점선 밀도

 - dashRatio: 점선 길이(적용) 비율 (0~1)

 - timeOffset: 애니메이션 시작 위치 조정

[ FLOW 모드 ] 

4. BLOOM 모드 (4) : 빛나는 발광 강조 효과

 - glowIntensity: 발광 강도 조절

  → 값이 높을수록 더 강하게 빛납니다.

[ BLOOM 모드 ]

 참고 코드

barrierEffect.removeBarrier(selected);

barrierEffect.setStyle(selected, style);

barrierEffect.getStyle(model);