前回は,
テクスチャが貼られた床を加える
床は矩形の平面として3次元空間に加える。貼りつけるテクスチャは,
矩形の平面もボールのように,
createPlane(幅, 高さ, ライト, 垂直位置)
平面をつくる関数
var plane;
var planeDiffuse = "assets/floor_diffuse.jpg";
function initialize() {
view = createView(240, 180, 0x0);
var scene = view.scene;
plane = createPlane(800, 800, directionalLight, -300);
// view.scene.addChild(sphere);
scene.addChild(sphere);
scene.addChild(plane);
AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
AssetLibrary.load(new URLRequest(planeDiffuse));
// view.render();
// view.render();
}
平面をつくる関数
new PrimitivePlanePrefab(幅, 高さ)
var PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
function createPlane(width, height, light, y) {
var material = new TriangleMethodMaterial();
var plane = new PrimitivePlanePrefab(width, height).getNewObject();
plane.material = material;
material.lightPicker = new StaticLightPicker([light]);
plane.y = y;
return plane;
}
読み込んだテクスチャをLoaderEvent.
LoaderEvent.
function onResourceComplete(eventObject) {
var assets = eventObject.assets;
// var material = sphere.material;
var material;
var count = assets.length;
var url = eventObject.url;
// material.texture = assets[0];
for (var i = 0; i < count; i++) {
var asset = assets[i];
switch (url) {
case (imageDiffuse):
material = sphere.material;
material.texture = asset;
break;
case (planeDiffuse):
material = plane.material;
material.texture = asset;
break;
}
}
// view.render();
}
これらの手が加えられたJavaScriptコードを以下にまとめた
コード1 3次元空間の球体の下にテクスチャの貼られた平面を置く
var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
var URLRequest = require("awayjs-core/lib/net/URLRequest");
var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
var View = require("awayjs-display/lib/containers/View");
var DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
var StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
var PrimitiveSpherePrefab = require("awayjs-display/lib/prefabs/PrimitiveSpherePrefab");
var PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
var view;
var sphere;
var plane;
var timer;
var imageDiffuse = "assets/beachball_diffuse.jpg";
var planeDiffuse = "assets/floor_diffuse.jpg";
function initialize() {
var directionalLight = createDirectionalLight(0.25, 0xFFFFFF);
view = createView(240, 180, 0x0);
var scene = view.scene;
sphere = createSphere(300, 32, 24, directionalLight);
plane = createPlane(800, 800, directionalLight, -300);
scene.addChild(sphere);
scene.addChild(plane);
AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
AssetLibrary.load(new URLRequest(imageDiffuse));
AssetLibrary.load(new URLRequest(planeDiffuse));
timer = new RequestAnimationFrame(rotate);
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 createSphere(radius, segmentsH, segmentsV, light) {
var material = new TriangleMethodMaterial();
var sphere = new PrimitiveSpherePrefab(radius, segmentsH, segmentsV)
.getNewObject();
sphere.material = material;
material.lightPicker = new StaticLightPicker([light]);
return sphere;
}
function createPlane(width, height, light, y) {
var material = new TriangleMethodMaterial();
var plane = new PrimitivePlanePrefab(width, height).getNewObject();
plane.material = material;
material.lightPicker = new StaticLightPicker([light]);
plane.y = y;
return plane;
}
function createDirectionalLight(ambient, color) {
var light = new DirectionalLight();
light.ambient = ambient;
light.color = color;
return light;
}
function onResourceComplete(eventObject) {
var assets = eventObject.assets;
var material;
var count = assets.length;
var url = eventObject.url;
for (var i = 0; i < count; i++) {
var asset = assets[i];
switch (url) {
case (imageDiffuse):
material = sphere.material;
material.texture = asset;
break;
case (planeDiffuse):
material = plane.material;
material.texture = asset;
break;
}
}
}