Skip to content

Commit 4d6e066

Browse files
committed
Rework shapes example
1 parent aaa7839 commit 4d6e066

File tree

4 files changed

+87
-81
lines changed

4 files changed

+87
-81
lines changed

examples/basic-shapes.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6+
<title>PlayCanvas Web Components - Primitive Shapes</title>
7+
<script type="importmap">
8+
{
9+
"imports": {
10+
"playcanvas": "../node_modules/playcanvas/build/playcanvas.mjs"
11+
}
12+
}
13+
</script>
14+
<script type="module" src="../dist/pwc.mjs"></script>
15+
<link rel="stylesheet" href="css/example.css">
16+
</head>
17+
<body>
18+
<pc-app>
19+
<!-- Assets -->
20+
<pc-asset id="camera-controls" src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs" preload></pc-asset>
21+
<!-- Materials -->
22+
<pc-material id="crimson" diffuse="crimson"></pc-material>
23+
<pc-material id="mediumseagreen" diffuse="mediumseagreen"></pc-material>
24+
<pc-material id="steelblue" diffuse="steelblue"></pc-material>
25+
<pc-material id="hotpink" diffuse="hotpink"></pc-material>
26+
<pc-material id="goldenrod" diffuse="goldenrod"></pc-material>
27+
<pc-material id="lightgrey" diffuse="lightgrey"></pc-material>
28+
<!-- Scene -->
29+
<pc-scene>
30+
<!-- Camera -->
31+
<pc-entity name="camera" position="-3 2 -3.25">
32+
<pc-camera></pc-camera>
33+
<pc-scripts>
34+
<pc-script name="cameraControls" attributes='{
35+
"enableFly": false,
36+
"enablePan": false,
37+
"focusPoint": [0, 0.5, 0],
38+
"pitchRange": [-90, 0]
39+
}'></pc-script>
40+
</pc-scripts>
41+
</pc-entity>
42+
<!-- Key Light (Spot) -->
43+
<pc-entity name="keyLight" position="3 5 -3" rotation="-45 -45 0">
44+
<pc-light type="spot" intensity="2" cast-shadows shadow-resolution="2048"></pc-light>
45+
</pc-entity>
46+
<!-- Fill Light (Omni) -->
47+
<pc-entity name="fillLight" position="-4 3 4">
48+
<pc-light type="omni" intensity="0.5"></pc-light>
49+
</pc-entity>
50+
<!-- Rim Light (Spot) -->
51+
<pc-entity name="rimLight" position="-2 4 -4" rotation="-40 45 0">
52+
<pc-light type="spot" intensity="1.5" cast-shadows shadow-resolution="2048"></pc-light>
53+
</pc-entity>
54+
<!-- Box-->
55+
<pc-entity name="box" position="1.5 0.5 0">
56+
<pc-render type="box" material="crimson"></pc-render>
57+
</pc-entity>
58+
<!-- Capsule -->
59+
<pc-entity name="capsule" position="0.464 1 1.425">
60+
<pc-render type="capsule" material="mediumseagreen"></pc-render>
61+
</pc-entity>
62+
<!-- Cylinder -->
63+
<pc-entity name="cylinder" position="-1.213 0.5 0.881">
64+
<pc-render type="cylinder" material="hotpink"></pc-render>
65+
</pc-entity>
66+
<!-- Cone -->
67+
<pc-entity name="cone" position="-1.213 0.5 -0.881">
68+
<pc-render type="cone" material="steelblue"></pc-render>
69+
</pc-entity>
70+
<!-- Sphere -->
71+
<pc-entity name="sphere" position="0.464 0.5 -1.425">
72+
<pc-render type="sphere" material="goldenrod"></pc-render>
73+
</pc-entity>
74+
<!-- Plane -->
75+
<pc-entity name="plane" position="0 0 0" scale="7 1 7">
76+
<pc-render type="plane" material="lightgrey"></pc-render>
77+
</pc-entity>
78+
</pc-scene>
79+
</pc-app>
80+
<script type="module" src="scripts/ui.mjs"></script>
81+
</body>
82+
</html>

examples/js/examples.mjs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
export const examples = [
22
{ name: 'Animation', path: 'animation.html' },
3+
{ name: 'Basic Shapes', path: 'basic-shapes.html' },
34
{ name: 'Car Configurator', path: 'car-configurator.html' },
45
{ name: 'Gaussian Splatting', path: 'splat.html' },
56
{ name: 'GLB Loader', path: 'glb.html' },
67
{ name: 'Physics', path: 'physics.html' },
78
{ name: 'Positional Sound', path: 'positional-sound.html' },
8-
{ name: 'Shapes', path: 'shapes.html' },
99
{ name: 'Shoe Configurator', path: 'shoe-configurator.html' },
1010
{ name: 'Solar System', path: 'solar-system.html' },
1111
{ name: 'Sound', path: 'sound.html' },
12-
{ name: 'Text Demo', path: 'text.html' },
13-
{ name: '3D Text', path: 'text3d.html' },
12+
{ name: 'Text Elements', path: 'text.html' },
13+
{ name: 'Text 3D', path: 'text3d.html' },
1414
{ name: 'Video Texture', path: 'video-texture.html' }
1515
];

examples/shapes.html

Lines changed: 0 additions & 76 deletions
This file was deleted.

src/material.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ class MaterialElement extends HTMLElement {
2323

2424
createMaterial() {
2525
this.material = new StandardMaterial();
26-
this.material.glossInvert = true;
27-
this.material.useMetalness = true;
26+
this.material.glossInvert = false;
27+
this.material.useMetalness = false;
2828
this.material.diffuse = this._diffuse;
2929
this.diffuseMap = this._diffuseMap;
3030
this.metalnessMap = this._metalnessMap;

0 commit comments

Comments
 (0)