three.js 변환과 CSS3 3D 변환은 어떻게 대응합니까?

저는 인간 해부학을 탐색하고 시각화하기 위해 open source tool에서 일하고 있습니다.three.js 변환과 CSS3 3D 변환은 어떻게 대응합니까?

주요 관심 대상은 대부분의 화면을 차지하는 '체스 보드'입니다. 보드를 드래그하면 특정 CSS3 3D 변환이 수행됩니다. 3D 객체 (아래 예에서 머리)가 보드 위로 가져 가서 three.js로 렌더링됩니다.

enter image description here

헤드의 변환

보드의 동기화된다. 그러나 이것은 현재 시행 착오로 실현 된 매우 불완전한 동기화입니다.

'CSS 3D 세계'와 'three.js/WebGL 3D 세계'는 어떻게 대응합니까? 예를 들어, CSS 세계에서 '카메라'는 어디에 있습니까? 두 가지를 올바르게 동기화 할 수있는 방법이 있습니까? 더 좋은 점은 도서관이 있습니까?

출처

2014-04-09 mhelvens

그들은 동기화 할 수 있지만 적어도 OSX에 크롬 34.0.1847.116와. 해킹 http://threejs.org/examples/css3d_sandbox.html을 시도하십시오. 동일한 카메라를 사용하여 두 가지를 렌더링하는 것으로 가정하면 'CSS3DObject'와 'PlaneGeometry'를 완벽하게 정렬 할 수 있어야합니다. – WestLangley

@WestLangley 흠, 그들은 dev 브랜치에서 여전히 동기화 된 것처럼 보입니다. 이 예제에는 배경색이 변경되지 않았습니다. 나는 그것을 새롭게 할 것이다. – mrdoob

@WestLangley : 감사합니다! 네 포인터가 나를 도와 줬어. 이 기술에 대한 자세한 내용은 [이 링크] (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/)에서 확인할 수 있습니다. 답변을 제출하려면 동의하겠습니다. – mhelvens

그들은 동기화합니다. 해킹 시도 http://threejs.org/examples/css3d_sandbox.html.

같은 카메라를 사용하여 두 가지를 모두 렌더링한다고 가정하면 CSS3DObject과 PlaneGeometry을 완벽하게 정렬 할 수 있어야합니다.

var geometry = new THREE.PlaneGeometry(100, 100); 
var mesh = new THREE.Mesh(geometry, material); 

mesh.position.copy(object.position); 
mesh.rotation.copy(object.rotation); 
mesh.scale.copy(object.scale); 

scene.add(mesh);

는 사실, 여기에 바이올린입니다 : http://jsfiddle.net/L9cUN/

three.js를 r.66

출처

2014-04-09 17:34:49 WestLangley

three.js 변환과 CSS3 3D 변환은 어떻게 대응합니까?

답변

관련 문제