2012-05-03 1 views
1

HTML5를 사용하고 싶다는 단순한 개념이 있지만 자바 스크립트로 작성된 캔버스 및 모델 뷰어의 경우 완전히 초보자입니다. 나는 탁상용 램프의 3D 모델을 가지고 있으며 마우스 동작으로 회전하는 램프의 머리 부분 만 싶습니다. 이 CSS3 box shadow effect은 일종의 말입니다.하지만 이미 HTML5로로드하고 Javascript를 커서 상호 작용에 사용하려는 Maya에서 3D 모델을 가져 왔습니다. 램프의 헤드 부분 만 3D 속성을 유지하기 만하면베이스 용 PNG를 사용할 수 있습니다. 이것이 의미가되기를 바랄 뿐이다. 보통 플래시 만 사용 하겠지만 가능한 한 HTML5로이 작업을하고 싶다. 3 그와 함께 도움이되지 않습니다HTML5 캔버스 요소 및 자바 스크립트로 3D 모델로드

+1

체크 아웃 [three.js] (https://github.com/mrdoob/three.js/) –

+0

Perfect, 이것이 내가 원하는 것입니다. 어쩌면 누군가 JSON 모델을 three.js로로드하는 방법에 대해 밝힐 수 있을까요? 감사! – dcd018

답변

1

CSS는, 당신이 "플러그인을 사용하지 않고 호환 웹 브라우저 내에서 대화 형 3D 그래픽을 렌더링하는 자바 스크립트 API"

입니다 WebGL이를 사용해야합니다 같은 소리

wikipedia articleofficial site 내가 너무 WebGL에 새로운 오전

+0

반대로 ... 나는 곧 오픈 소싱을 계획하고있는 3D CSS 엔진을 가지고 있습니다. 그것은 OP, 난 단지 당신의 의견을 놀랍게도 관련성이 발견 도움이되지 않습니다 :) –

+0

무엇의 3D CSS 엔진? 3D 객체 모델링? –

+0

예. 바로 .obj 및 .mtl 파일에서. –

2

(또한 "test if your browser supports WebGL site"있다) 시도, 당신은 three.js를 함께 할 수 있습니다. 블렌더를 사용하고 있다면 컨버터 스크립트를 사용할 수 있습니다.이 스크립트는 모델을 json 파일로 변환합니다.

그러면 json 파일을 three.js의 json 로더를 사용하여 캔버스에로드 할 수 있습니다. json 모델을로드하는 데 유용한 링크를 발견했습니다. https://code.google.com/p/jsc3d/

인용 : ..JSC3D가 2 차원 캔버스를 사용하여 렌더링 순수한 자바 스크립트 소프트웨어에 내장되어 있습니다 http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html