Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor improvements to asset viewer example #4823

Merged
merged 1 commit into from
Nov 7, 2022
Merged

Minor improvements to asset viewer example #4823

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 56 additions & 56 deletions examples/src/examples/graphics/asset-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';

import * as pc from '../../../../';
import { BindingTwoWay } from '@playcanvas/pcui';
import { LabelGroup, SelectInput } from '@playcanvas/pcui/react';
import { Panel, Button } from '@playcanvas/pcui/react';
import { Observer } from '@playcanvas/observer';

class AssetViewerExample {
Expand All @@ -11,16 +10,10 @@ class AssetViewerExample {

controls(data: Observer) {
return <>
<LabelGroup text='Asset'>
<SelectInput binding={new BindingTwoWay()} link={{ observer: data, path: 'selection.focusEntity' }} type='number' options={[
{ v: 0, t: 'lamp off' },
{ v: 1, t: 'lamp on' },
{ v: 2, t: 'dish' },
{ v: 3, t: 'mosquito' },
{ v: 4, t: 'sheen chair peacock' },
{ v: 5, t: 'sheen chair mango' }
]} />
</LabelGroup>
<Panel headerText='Asset'>
<Button text='Previous' onClick={() => data.emit('previous')}/>
<Button text='Next' onClick={() => data.emit('next')}/>
</Panel>
</>;
}

Expand Down Expand Up @@ -60,139 +53,132 @@ class AssetViewerExample {
app.scene.layers.remove(depthLayer);
app.scene.layers.insertOpaque(depthLayer, 2);

app.scene.ambientLight = new pc.Color(0.0, 0.0, 0.0);



const createText = function (fontAsset: pc.Asset, message: string, x: number, y: number, z: number, rotx: number, roty: number) {
const createText = function (fontAsset: pc.Asset, message: string, x: number, z: number) {
// Create a text element-based entity
const text = new pc.Entity();
text.addComponent("element", {
anchor: [0.5, 0.5, 0.5, 0.5],
fontAsset: fontAsset,
fontSize: 0.3,
fontSize: 0.2,
pivot: [0.5, 0.5],
text: message,
type: pc.ELEMENTTYPE_TEXT
});
text.setLocalPosition(x, y, z);
text.setLocalEulerAngles(rotx, roty, 0);
text.setLocalPosition(x, -0.9, z);
text.setLocalEulerAngles(-90, 0, 0);
app.root.addChild(text);
};

app.start();
let currentAssetIndex = 0;

const mosquito = assets.mosquito.resource.instantiateRenderEntity({
castShadows: true
});
mosquito.setLocalScale(new pc.Vec3(15, 15, 15));
mosquito.setLocalScale(new pc.Vec3(25, 25, 25));
mosquito.setLocalPosition(0, 0.5, 0);
app.root.addChild(mosquito);
createText(assets.font, "KHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", 0, 3, 0, 0, 0);
createText(assets.font, "KHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", 0, 2);

// create an entity with render assets
const dish = assets.dish.resource.instantiateRenderEntity({
castShadows: true
});
dish.setLocalScale(new pc.Vec3(6, 6, 6));
dish.setLocalScale(new pc.Vec3(9, 9, 9));
dish.setLocalPosition(-4, -0.5, 0);
app.root.addChild(dish);
createText(assets.font, "KHR_materials_specular\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", -4, 3, 0, 0, 0);
createText(assets.font, "KHR_materials_specular\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", -4, 2);

const sheen1 = assets.sheen.resource.instantiateRenderEntity({
castShadows: true
});
sheen1.setLocalScale(new pc.Vec3(3, 3, 3));
sheen1.setLocalPosition(7, -1.0, 0);
sheen1.setLocalScale(new pc.Vec3(4, 4, 4));
sheen1.setLocalPosition(8, -1.0, 0);
app.root.addChild(sheen1);
createText(assets.font, "Mango Velvet", 7, 0.5, 0, 0, 0);
createText(assets.font, "Mango Velvet", 8, 1);

const sheen2 = assets.sheen.resource.instantiateRenderEntity({
castShadows: true
});
sheen2.setLocalScale(new pc.Vec3(3, 3, 3));
sheen2.setLocalScale(new pc.Vec3(4, 4, 4));
sheen2.setLocalPosition(4, -1.0, 0);
assets.sheen.resource.applyMaterialVariant(sheen2, "Peacock Velvet");
app.root.addChild(sheen2);
createText(assets.font, "KHR_materials_sheen\nKHR_materials_variants", 5, 3, 0, 0, 0);
createText(assets.font, "Peacock Velvet", 4, 0.5, 0, 0, 0);
createText(assets.font, "KHR_materials_sheen\nKHR_materials_variants", 5.5, 2);
createText(assets.font, "Peacock Velvet", 4, 1);

const lamp = assets.lamp.resource.instantiateRenderEntity({
castShadows: true
});
lamp.setLocalScale(new pc.Vec3(3, 3, 3));
lamp.setLocalScale(new pc.Vec3(5, 5, 5));
lamp.setLocalPosition(-8, -1.0, 0);
createText(assets.font, "Lamp on", -8, 1.5, 0, 0, 0);
createText(assets.font, "Lamp on", -8, 1);
app.root.addChild(lamp);

const lamp2 = assets.lamp.resource.instantiateRenderEntity({
castShadows: true
});
lamp2.setLocalScale(new pc.Vec3(3, 3, 3));
lamp2.setLocalPosition(-10, -1.0, 0);
lamp2.setLocalScale(new pc.Vec3(5, 5, 5));
lamp2.setLocalPosition(-11, -1.0, 0);
assets.lamp.resource.applyMaterialVariant(lamp2, "Lamp off");
app.root.addChild(lamp2);
createText(assets.font, "Lamp off", -10, 1.5, 0, 0, 0);
createText(assets.font, "KHR_materials_transmission\nKHR_materials_ior\nKHR_materials_volume\nKHR_materials_variants\nKHR_materials_clearcoat", -9, 3, 0, 0, 0);
createText(assets.font, "Lamp off", -11, 1);
createText(assets.font, "KHR_materials_transmission\nKHR_materials_ior\nKHR_materials_volume\nKHR_materials_variants\nKHR_materials_clearcoat", -9.5, 2);

const assetList = [
lamp2, lamp, dish, mosquito, sheen2, sheen1
];

const material = new pc.StandardMaterial();
material.diffuseMap = assets.checkerboard.resource;
material.diffuseMapTiling = new pc.Vec2(64, 64);
material.diffuseMapTiling = new pc.Vec2(16, 6);
material.update();
const plane = new pc.Entity();
plane.addComponent('model', {
type: 'plane',
material: material
});
plane.setLocalScale(new pc.Vec3(100, 0, 100));
plane.setLocalScale(new pc.Vec3(25, 0, 10));
plane.setLocalPosition(0, -1.0, 0);
app.root.addChild(plane);

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.4, 0.45, 0.5)
});
camera.setLocalPosition(0, 5, 30);
camera.setLocalPosition(0, 55, 160);

camera.camera.requestSceneColorMap(true);
camera.addComponent("script");
camera.script.create("orbitCamera", {
attributes: {
inertiaFactor: 0.2,
focusEntity: assetList[3],
distanceMin: 1,
distanceMax: 400,
frameOnStart: false
distanceMin: 8,
distanceMax: 50
}
});
camera.script.create("orbitCameraInputMouse");
camera.script.create("orbitCameraInputTouch");
app.root.addChild(camera);

// @ts-ignore engine-tsd
camera.script.orbitCamera.distance = 15.0;

const directionalLight = new pc.Entity();
directionalLight.addComponent("light", {
type: "directional",
color: pc.Color.WHITE,
castShadows: true,
intensity: 2,
intensity: 1,
shadowBias: 0.2,
normalOffsetBias: 0.05,
shadowResolution: 2048
});
directionalLight.setEulerAngles(45, 180, 0);
app.root.addChild(directionalLight);


app.scene.setSkybox(assets.helipad.resources);
app.scene.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
app.scene.skyboxIntensity = 1.5;

window.addEventListener("touchstart", (event) => {
const touch = event.touches[0];
Expand All @@ -208,19 +194,33 @@ class AssetViewerExample {
}
}, false);

// handle HUD changes - update properties on the light
data.on('selection.focusEntity:set', (value: any) => {
const pos = assetList[value].getLocalPosition();
const newPos = new pc.Vec3(0, 2.0, 6.0).add(pos);
function jumpToAsset(offset: number) {

// @ts-ignore engine-tsd
// wrap around
const count = assetList.length - 1;
currentAssetIndex += offset;
if (currentAssetIndex < 0) currentAssetIndex = count;
if (currentAssetIndex > count) currentAssetIndex = 0;

const pos = assetList[currentAssetIndex].getLocalPosition();
const newPos = new pc.Vec3(0, 2.0, 6.0).add(pos);
camera.setLocalPosition(newPos);

// @ts-ignore engine-tsd
camera.script.orbitCamera.focusEntity = assetList[value];
camera.script.orbitCamera.focusEntity = assetList[currentAssetIndex];
}

// focus on mosquito
jumpToAsset(3);

data.on('previous', function () {
jumpToAsset(-1);
});

data.set('selection.focusEntity', 3);
// remove light button handler
data.on('next', function () {
jumpToAsset(1);
});
});
}
}
Expand Down