2017年Virtual DOM在3D渲染中的應用-類ReactJS庫的實現及3D應用.pdf

1、Virtual DOM在3D渲染中的應用類ReactJS庫的實現及3D應用DOMWebGL黃勇20062012:武漢大學5年前端開發經驗2016年8月加入酷家樂，花名佚名HTML5工具前端負責人設計并實現HTML5版本的家裝設計工具普通的3D程序var geometry=new THREE.BoxGeometry(1,1,1);var material=new THREE.MeshBasicMaterial(color:var cube=new THREE.Mesh(geometry,material);/scene.add(cube);/addcamera.position.z=5;var

2、animate=function()requestAnimationFrame(animate);cube.rotation.x+=0.1;/updatecube.rotation.y+=0.1;renderer.render(scene,camera);不便之處命令式：手動的創建、添加和更新組合性差ReactJS聲明式良好的可組合性DOMWebGLReactJS？render()只能返回一個節點多renderer不能共存用來包裹自定義組件？ReactJS？With React:30FPSWithout React:60FPS我們的解決方案vdom+threejs我們的解決方案vdom+thr

3、eejs類ReactJS的實現vdomcreate,diff,patch類ReactJS的實現vdom類ReactJS的實現vdom類ReactJS的實現vdom類ReactJS的實現vdom我們的解決方案vdom+threejs副作用ThreeComponentDOMWebGL回顧使用virtual dom來描述視圖結構利用組件的副作用修改threejs對象，驅動WebGL2D！使用virtual dom來描述視圖結構利用組件的副作用修改pixijs對象，驅動2D CanvasPixiComponentDOMWebGLCanvas總結Virtual DOM庫的原理及實現vdom+threejsvdom+pixijs全局統一的編程體驗