[文章待補中]
今天我們要把嵌入 iframe 的 youtube 組合成為一個立方體。讓 three.js 也有直接操作 DOM 的能力。

THREE.Group()

範例當中我們會使用到這個 API。這個 API 能夠幫助你 group 幾何圖形，也可以利用 group 的方式來組合出自己的圖形。

使用的方式很簡單：

const group = new THREE.Group();
group.add(Object3D);

只要加入的物件是 Three.js 中的 Object3D 即可。

基本設置

<div id="container"></div>

var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.set( 50, 50, 750 );

scene = new THREE.Scene();
renderer = new THREE.CSS3DRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
container.appendChild( renderer.domElement );

var group = new THREE.Group()

設定好了之後，應該就能看見我們的 container 下，有新的 div 被加入，並且 style 中有 perserve3d 的屬性。這是 CSS3DRenderer 幫我們做好的事。

加入 iframe

var Video3D = function ( id, x, y, z, ry ) {
    var div = document.createElement( 'div' );
    div.className = 'video'

    var iframe = document.createElement( 'iframe' );
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = '0';
    iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
    div.appendChild( iframe );

    var object = new THREE.CSS3DObject( div );
    object.position.set( x, y, z );
    object.rotation.y = ry;
    return object;
};
var group = new THREE.Group();
	[
		{
			id:'J7uFJByUCCc',
			position: [0,0,240,0]
	  }, 
	  {
	  	id: 'J7uFJByUCCc',
	  	position:  [240,0,0, Math.PI / 2]
	  },
	  {
	  	id: 'cRIBCezbUhA',
	  	position: [0,0,-240,Math.PI],
	  },
	  {
	  	id: 'cRIBCezbUhA',
	  	position: [-240,0,0,-Math.PI /2]
	  }
	].forEach((element) => {
		group.add(new Video3D(element.id, element.position[0], element.position[1], element.position[2], element.position[3]))
	})