xemu-project/xemu-website
1
0
Fork 0
mirror of https://github.com/xemu-project/xemu-website.git synced 2024-11-23 03:19:44 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Animation pos/rot/fov/fog/color tweaks

Browse Source
This commit is contained in:
Matt Borgerson 2022-06-23 00:08:40 -07:00
parent d197b0631a
commit 2eb3ade015
2 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
resources/mesh_pattern.svg
View File

@ -7,46 +7,82 @@
viewBox="0 0 33.866666 33.866668"
version="1.1"
id="svg5"
sodipodi:docname="mesh_pattern.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<title
id="title2697">xemu.app Orb Mesh Texture</title>
<sodipodi:namedview
id="namedview13"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="4.8226892"
inkscape:cx="61.272868"
inkscape:cy="68.633906"
inkscape:window-width="1908"
inkscape:window-height="1017"
inkscape:window-x="3844"
inkscape:window-y="1097"
inkscape:window-maximized="0"
inkscape:current-layer="svg5" />
<defs
id="defs2" />
<g
id="layer1">
<rect
style="fill:#062a00;stroke-width:1.05833333;fill-opacity:1;stroke:#2c6d0f;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
style="fill:#0f3205;stroke-width:1.05833333;fill-opacity:1;stroke:#21610d;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect846"
width="33.866665"
height="33.866665"
x="8.9009603e-07"
y="8.9009603e-07" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 8.9009603e-7,8.9009603e-7 33.866664,33.866664"
id="path1520" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 22.053307,12.062727 -5.162329,4.91296"
id="path1522" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.053307,12.062727 16.933333,0"
id="path1668" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 22.053307,12.062727 11.81336,4.870606"
id="path1994" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.52916667;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 11.728649,21.888647 5.162329,-4.91296"
id="path4202" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 11.728649,21.888647 5.204684,11.97802"
id="path4204" />
<path
style="fill:none;stroke:#2c6d0f;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#21610d;stroke-width:0.79375001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 11.728649,21.888647 0,16.933333"
id="path4206" />
</g>
<metadata
id="metadata2695">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>xemu.app Orb Mesh Texture</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

11
templates/template_index.html
View File

@ -242,8 +242,8 @@ if (platform != undefined) {
<script type="text/javascript">
var canvas = document.querySelector('#bg-scene');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000 );
scene.fog = new THREE.Fog('black', 0.5, 2.75);
var camera = new THREE.PerspectiveCamera( 74.5, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000 );
scene.fog = new THREE.Fog('black', 0.2, 2.45);
scene.background = new THREE.Color('black');
var renderer = new THREE.WebGLRenderer();
@ -260,13 +260,14 @@ const geometry = new THREE.SphereGeometry( 1, 50, 25 );
var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.BackSide } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 1;
camera.position.z = 0.65;
camera.position.x = 0.12;
var clock = new THREE.Clock();
var render = function () {
requestAnimationFrame( render );
var delta = clock.getDelta();
sphere.rotation.y += 0.01 * delta;
var t = clock.getElapsedTime();
sphere.rotation.y = (Math.PI/10) * Math.sin(t * Math.PI / 50);
renderer.render(scene, camera);
};
render();