本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有興趣的可以一起來完善，這個為Three.js的Example進行注解，方便初學(xué)者閱讀
three.js 官網(wǎng) Example 地址：https://threejs.org/examples/
<!DOCTYPE html><html> <head> <title>three.js css3d - youtube</title> <meta charset="utf-8"> <!-- 如果沒有設(shè)置viewport的width的話，網(wǎng)頁很可能會超出手機屏幕寬度，具體多寬，要看瀏覽器定義的默認(rèn)寬度是多少 user-scalable=no，規(guī)定了用戶不能縮放網(wǎng)頁，但有些瀏覽器對該項支持不是很好，故需要設(shè)置minimum-scale和maximum-scale相同來限制用戶縮放 --> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> html, body { height: 100%; overflow: hidden; } #blocker { position: absolute; /* background-color: rgba(255, 0, 0, 0.5); */ top: 0px; left: 0px; width: 100%; height: 100%; } </style> </head> <body> <script src="../build/three.js"></script> <!-- 軌跡控制，鼠標(biāo)左鍵旋轉(zhuǎn)(與鼠標(biāo)方向相反，用于觸摸屏上)，右鍵平移，中鍵縮放；也可以使用鍵盤控制 --> <script src="js/controls/TrackballControls.js"></script> <!-- 使用CSS3渲染3D的DOM元素 --> <script src="js/renderers/CSS3DRenderer.js"></script> <div id="container"></div> <div id="blocker"></div> <script> var camera, scene, renderer; var Element = function ( id, x, y, z, ry ) {/* var div = document.createElement( 'div' ); div.style.width = '480px'; div.style.height = '360px'; div.style.backgroundColor = '#000';*/ var iframe = document.createElement( 'iframe' ); iframe.style.width = '480px'; iframe.style.height = '360px'; iframe.style.border = '0px'; iframe.style.backgroundColor = '#000'; iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );// div.appendChild( iframe ); //var object = new THREE.CSS3DObject( div ); //只要是個DOM元素均可，外部嵌套div是非必要的 var object = new THREE.CSS3DObject( iframe ); object.position.set( x, y, z ); object.rotation.y = ry; return object; }; init(); animate(); function init() { var container = document.getElementById( 'container' ); /* PerspectiveCamera(fov, aspect, near, far) fov(視場)：從相機位置能夠看到的部分場景。推薦默認(rèn)值45 aspect(長寬比)：渲染結(jié)果輸出區(qū)域的橫向長度和縱向長度的比值。推薦默認(rèn)值window.innerWidth/window.innerHeight near(近面)：定義從距離相機多近的地方開始渲染場景。推薦默認(rèn)值0.1 far(遠(yuǎn)面)：定義相機可以從它所處的位置看多遠(yuǎn)。默認(rèn)值1000 */ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 ); /* 定義相機的位置，有如下兩種方式。如果不設(shè)置的話，相機位置為默認(rèn)的Vector3{x:0,y:0,z:0} camera.position.x = 500; camera.position.x = 350; camera.position.x = 750; */ camera.position.set( 500, 350, 750 ); scene = new THREE.Scene(); renderer = new THREE.CSS3DRenderer(); //設(shè)置待渲染場景的大小 renderer.setSize( window.innerWidth, window.innerHeight ); //將渲染器的DOM元素(即Canvas)可以設(shè)置樣式 //renderer.domElement.style.position = 'absolute'; //renderer.domElement.style.top = 0; container.appendChild( renderer.domElement ); //three.js中的分組，同一個分組中的對象可以一起執(zhí)行某項操作，不用再進行遍歷判斷 var group = new THREE.Group(); group.add( new Element( 'njCDZWTI-xg', 0, 0, 240, 0 ) ); group.add( new Element( 'HDh4uK9PvJU', 240, 0, 0, Math.PI / 2 ) ); group.add( new Element( 'OX9I1KyNa8M', 0, 0, - 240, Math.PI ) ); group.add( new Element( 'nhORZ6Ep_jE', - 240, 0, 0, - Math.PI / 2 ) ); scene.add( group ); //設(shè)置鼠標(biāo)控制的對象為相機 controls = new THREE.TrackballControls( camera ); //鼠標(biāo)移動距離轉(zhuǎn)化為控制器旋轉(zhuǎn)角度的比例 controls.rotateSpeed = 4; window.addEventListener( 'resize', onWindowResize, false ); // Block iframe events when dragging camera var blocker = document.getElementById( 'blocker' ); //display和visibility的效果一樣，即使不顯示元素，也會保留其物理空間 blocker.style.display = 'none'; document.addEventListener( 'mousedown', function () { //style.display = ""；是清除display樣式，display將使用默認(rèn)值（塊元素會變成b搜索lock，內(nèi)聯(lián)元素會變成inline） blocker.style.display = ''; //blocker.style.visibility = "visible"; } ); document.addEventListener( 'mouseup', function () { blocker.style.display = 'none'; //blocker.style.visibility = "hidden"; } ); } function onWindowResize() { //重新設(shè)置相機的寬高比。如果寬高比不對，那么正方形可能就不是正方形了 camera.aspect = window.innerWidth / window.innerHeight; //更新透視相機的投影矩陣 camera.updateProjectionMatrix(); //重新設(shè)置渲染場景的大小 renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); //更新軌跡控制器，這里軌跡控制器與相機關(guān)聯(lián)，所以也會更新相機的位置和角度。因此這里就不用設(shè)置相機的lookAt了。如果鼠標(biāo)移動的話，相機會繞著原點旋轉(zhuǎn) controls.update(); //console.log(camera.position.length()); renderer.render( scene, camera ); } </script> </body></html>