サイトトップ

Director Flash 書籍 業務内容 プロフィール

Away3D TypeScriptではじめる3次元表現

背景の映り込んだドーナッツ型を捉えてカメラが上下左右に回る

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」第6回「スカイボックスの中に置いたドーナッツ型をカメラで追う」のコード3「背景の映り込んだドーナッツ型を上下左右にに回るカメラで捉える」を2015年10月9日付ビルドに対応させました。script要素の記述はつぎのコードのとおりです(HTMLドキュメントはskybox_and_environment_mapping.html)。

コード

<script src="lib/awayjs-core.min.js"></script>
<script src="lib/awayjs-display.min.js"></script>
<script src="lib/awayjs-renderergl.min.js"></script>
<script src="lib/awayjs-stagegl.min.js"></script>
<script src="lib/awayjs-methodmaterials.min.js"></script>
<script>
var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var Vector3D = require("awayjs-core/lib/geom/Vector3D");
var AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
var LoaderContext = require("awayjs-core/lib/library/LoaderContext");
var URLRequest = require("awayjs-core/lib/net/URLRequest");
var PerspectiveProjection = require("awayjs-core/lib/projections/PerspectiveProjection");
var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
var View = require("awayjs-display/lib/containers/View");
var Skybox = require("awayjs-display/lib/entities/Skybox");
var PrimitiveTorusPrefab = require("awayjs-display/lib/prefabs/PrimitiveTorusPrefab");
var SingleCubeTexture = require("awayjs-display/lib/textures/SingleCubeTexture");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var MethodMaterial = require("awayjs-methodmaterials/lib/MethodMaterial");
var EffectEnvMapMethod = require("awayjs-methodmaterials/lib/methods/EffectEnvMapMethod");
var view;
var torus;
var timer;
var baseUrl = "assets/skybox/";
var imageSkybox = "snow_texture.cube";
var zeroVector3D = new Vector3D();
var cameraZ = -600;
var centerX = 200;
var centerY = 150;
var viewWidth = centerX * 2;
var viewHeight = centerY * 2;
var lastMouseX = centerX;
var lastMouseY = centerY;
var sencitivity = 1 / 500;
function initialize() {
	view = createView(viewWidth, centerY * 2, 0xFFFF00);
	torus = createTorus(150, 60, 40, 20);
	setupCamera(view.camera, cameraZ, 90);
	view.scene.addChild(torus);
	AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
	loadAssets(baseUrl, imageSkybox);
	document.onmousemove = getMousePosition;
	timer = new RequestAnimationFrame(render);
	timer.start();
}
function createView(width, height, backgroundColor) {
	var defaultRenderer = new DefaultRenderer();
	var view = new View(defaultRenderer);
	view.width = width;
	view.height = height;
	view.backgroundColor = backgroundColor;
	return view;
}
function createTorus(radius, tubeRadius, segmentsR, segmentsT) {
	var material = new MethodMaterial();
	var torus = new PrimitiveTorusPrefab(radius, tubeRadius, segmentsR, segmentsT)
	.getNewObject();
	torus.material = material;
	material.color = 0x111199;
	return torus;
}
function setupCamera(camera, z, fieldOfView) {
	camera.z = z;
	camera.lookAt(zeroVector3D);
	camera.projection = new PerspectiveProjection(fieldOfView);
}
function loadAssets(base, image) {
	var assetLoaderContext = new LoaderContext();
	assetLoaderContext.dependencyBaseUrl = base;
	AssetLibrary.load(new URLRequest(base + image), assetLoaderContext);
}
function onResourceComplete(eventObject) {
	var assets = eventObject.assets;
	var count = assets.length;
	var url = eventObject.url;
	for (var i = 0; i < count; i++) {
		var asset = assets[i];
		switch (url) {
			case (baseUrl + imageSkybox):
				setupSkybox(asset);
				break;
		}
	}
}
function setupSkybox(cubeTexture) {
	var singleCubeTexture = new SingleCubeTexture(cubeTexture)
	var skybox = new Skybox(singleCubeTexture);
	view.scene.addChild(skybox);
	torus.material.addEffectMethod(new EffectEnvMapMethod(singleCubeTexture));
}
function render(timeStamp) {
	var camera = view.camera;
	var transform = camera.transform;
	var rotationX = camera.rotationX;
	torus.rotationX += 2;
	torus.rotationY += 1;
	transform.position = zeroVector3D;
	camera.rotationY += (lastMouseX - centerX) * sencitivity;
	rotationX += (lastMouseY - centerY) * sencitivity;
	if (rotationX > 30) {
		rotationX = 30;
	} else if (rotationX < -30) {
		rotationX = -30;
	}
	camera.rotationX = rotationX;
	transform.moveBackward(-cameraZ);
	view.render();
}
function getMousePosition(eventObject) {
	lastMouseX = eventObject.clientX;
	lastMouseY = eventObject.clientY;
	if (lastMouseX > viewWidth) {
		lastMouseX = viewWidth;
	}
	if (lastMouseY > viewHeight) {
		lastMouseY = viewHeight;
	}
}
</script>

作成者: 野中文雄
更新日: 2015年11月6日 コードの記述とスタイルを若干修正し、HTMLドキュメントへのリンクを追加。
作成日: 2015年11月4日


Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.