[WebGL] Three.js - Embedded HTML

=======================

=======================

=======================

 

 

 

 

출처: http://cinema4dr12.tistory.com/790

[WebGL] Embedded HTML

 

 

이번 예제는 HTML 페이지를 Plane 오브젝트에 Embedding 하는 방법에 대한 것이다.

[Download Project]

13-01-embedded-html-basic.zip

다운로드

 

 

FULL SCREEN

 

 

[Operations]

Mouse Left Button Click & Drag: Camera Rotating

Mouse Wheel: Camera Zoom In & Out

Mouse Right Button Click & Drag: Camera Panning

[main.js]

// standard global variables var container, scene, camera, renderer, controls, stats; var keyboard = new THREEx.KeyboardState(); var clock = new THREE.Clock(); // custom global variables var rendererCSS; init(); animate(); // FUNCTIONS function init() { // SCENE - WebGL scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); scene.add(camera); camera.position.set( -958.0034764777636, 413.8144325335853, 3357.751964735692 ); camera.rotation.set( -0.04403099677788493, -0.2567823882704446, -0.011189306356995925 ); camera.lookAt(new THREE.Vector3( 0, 500, 0 )); // RENDERER - WebGL if ( Detector.webgl ) renderer = new THREE.WebGLRenderer( {antialias:true} ); else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container = document.getElementById( 'ThreeJS' ); container.appendChild( renderer.domElement ); // RENDERER - CSS rendererCSS = new THREE.CSS3DRenderer(); rendererCSS.setSize( window.innerWidth, window.innerHeight ); rendererCSS.domElement.style.position = 'absolute'; rendererCSS.domElement.style.top = 0; rendererCSS.domElement.style.margin = 0; rendererCSS.domElement.style.padding = 0; document.body.appendChild( rendererCSS.domElement ); // when window resizes, also resize this renderer THREEx.WindowResize(rendererCSS, camera); renderer.domElement.style.position = 'absolute'; renderer.domElement.style.top = 0; // make sure original renderer appears on top of CSS renderer renderer.domElement.style.zIndex = 1; rendererCSS.domElement.appendChild( renderer.domElement ); // EVENTS THREEx.WindowResize(renderer, camera); THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) }); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); // LIGHT var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); light.shadowDarkness = 0.95; light.intensity = 2; light.castShadow = true; scene.add(light); // FLOOR // SKYBOX/FOG var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 ); var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ); var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial ); scene.add(skyBox); //////////// // CUSTOM // //////////// var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 0.1, side: THREE.DoubleSide }); var planeWidth = 1920; var planeHeight = 1080; var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight ); // create planeMesh1 var planeMesh1 = new THREE.Mesh( planeGeometry, planeMaterial ); planeMesh1.position.y += planeHeight/2; scene.add(planeMesh1); // create planeMesh2 var planeGeometry2 = new THREE.PlaneGeometry( planeWidth, planeHeight ); var planeMesh2 = new THREE.Mesh( planeGeometry, planeMaterial ); planeMesh2.position.y += planeHeight/2; planeMesh2.position.x = -2000; scene.add(planeMesh2); // create planeMesh3 var planeGeometry3 = new THREE.PlaneGeometry( planeWidth, planeHeight ); var planeMesh3 = new THREE.Mesh( planeGeometry3, planeMaterial ); planeMesh3.position.y += planeHeight/2; planeMesh3.position.x = 2000; scene.add(planeMesh3); // create a new scene to hold CSS cssScene = new THREE.Scene(); // create the iframe to contain webpage var element1 = document.createElement('iframe'); var element2 = document.createElement('iframe'); var element3 = document.createElement('iframe'); // webpage to be loaded into iframe element1.src = "http://www.threejs.org"; element2.src = "http://www.chromeexperiments.com/webgl/"; element3.src = "http://helloracer.com/"; // width of iframe in pixels var elementWidth = 1920; // force iframe to have same relative dimensions as planeGeometry var aspectRatio = planeHeight / planeWidth; var elementHeight = elementWidth * aspectRatio; element1.style.width = elementWidth + "px"; element1.style.height = elementHeight + "px"; element2.style.width = elementWidth + "px"; element2.style.height = elementHeight + "px"; element3.style.width = elementWidth + "px"; element3.style.height = elementHeight + "px"; // create a CSS3DObject to display element var cssObject1 = new THREE.CSS3DObject( element1 ); var cssObject2 = new THREE.CSS3DObject( element2 ); var cssObject3 = new THREE.CSS3DObject( element3 ); // synchronize cssObject position/rotation with planeMesh position/rotation cssObject1.position = planeMesh1.position; cssObject1.rotation = planeMesh1.rotation; cssObject1.scale = planeMesh1.scale; cssObject2.position = planeMesh2.position; cssObject2.rotation = planeMesh2.rotation; cssObject2.scale = planeMesh2.scale; cssObject3.position = planeMesh3.position; cssObject3.rotation = planeMesh3.rotation; cssObject3.scale = planeMesh3.scale; // resize cssObject to same size as planeMesh (plus a border) var percentBorder = 0.0; cssObject1.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth); cssObject1.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth); cssObject2.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth); cssObject2.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth); cssObject3.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth); cssObject3.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth); cssScene.add(cssObject1); cssScene.add(cssObject2); cssScene.add(cssObject3); } function animate() { requestAnimationFrame( animate ); render(); update(); } function update() { if ( keyboard.pressed("z") ) { // do something } controls.update(); stats.update(); } function render() { // remember to call both renderers - WebGL Render + CSS Render! rendererCSS.render( cssScene, camera ); renderer.render( scene, camera ); }

 

 

=======================

=======================

=======================