header
	h1.ttl-01
		|コーダー目線で始めるThree.js
		span
			|サンプル2:Three.js追加


<!-- ここからサンプルコード開始です -->
#cont-canvas

#cont-scene
	.block-scene
		h2.ttl-02 CSS3DRendererテスト1
		p.text
			|親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
		p.text
			|新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
		p.note
			|(青空文庫より)
		a.link(href="https://www.yahoo.co.jp/", target="_blank") Yahoo!へのリンク

	.block-scene
		h2.ttl-02 CSS3DRendererテスト2
		p.text
			|親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
		p.text
			|新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
		p.note
			|(青空文庫より)

	.block-scene
		h2.ttl-02 CSS3DRendererテスト3
		p.text
			|親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
		p.text
			|新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
		p.note
			|(青空文庫より)
View Compiled
#cont-scene {
	width: 600px;
	margin: 0 auto;
	// padding: 60px 0 0; // Three.jsの時はコメントアウト
}

.block-scene {
	width: 600px;
	padding: 30px;
	background: #ffe;
	transition: background .5s ease-in-out;
	&:hover {
		background-color: rgba(#ffe, 0.5);
	}
	&:nth-child(even) {
		background: #eef;
		&:hover {
			background-color: rgba(#eef, 0.5);
		}
	}
}

.ttl-02 {
	color: #333;
	font-size: 28px;
}

.text {
	color: #666;
	font-size: 14px;
}

.note {
	color: #999;
	font-size: 12px;
	text-align: right;
}

.link {
	color: #66f;
	font-size: 14px;
	&:hover {
		color: #f99;
	}
}
(function () {

	var $container = $('#cont-canvas');

	var renderer, camera, scene;
	var controls;
	
	var objects = [];

	var contWidth = $(window).innerWidth();
	var contHeight = $(window).innerHeight();
	var	baseObjPosZ = 5000;
	var baseCameraPosZ = 6000;
	var contDepth = 6000;

	initThree();			// Three.js初期化
	initControler();	// コントローラー初期化
	initObject();			// オブジェクト初期化
	render();					// 描画処理
	
	function initThree() {

		scene = new THREE.Scene();

		renderer = new THREE.CSS3DRenderer();
		renderer.setSize(contWidth, contHeight);
		$container.append(renderer.domElement);

		camera = new THREE.PerspectiveCamera(45, contWidth/contHeight, 1, 10000);
		camera.position.z = baseCameraPosZ;

		$(window).on('resize', function() {
			contWidth = $(window).innerWidth();
			contHeight = $(window).innerHeight();
			camera.aspect = contWidth / contHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(contWidth, contHeight);
		});

	}

	function initControler() {
		controls = new THREE.TrackballControls(camera, renderer.domElement);
		controls.rotateSpeed = 0.1;
		controls.zoomSpeed = 0.05;
		controls.maxDistance = contDepth;
	}
	
	function initObject() {
		$('.block-scene').each(function(num) {
			objects[num] = new THREE.CSS3DObject(this);
			objects[num].position.set(0,0,baseObjPosZ);
			baseObjPosZ -= 1500;
		});
		
		for (var i = 0; i<objects.length; i++) {
			scene.add(objects[i]);
		}
	}
	
	function render() {
		requestAnimationFrame(render);
		renderer.render(scene, camera);
		controls.update();
	}

})(window, jQuery);

External CSS

  1. https://codepen.io/cb-kouraku/pen/mwjMza

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js
  3. https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js
  4. https://codepen.io/cb-kouraku/pen/NgBaqx