103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
|
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);} //
|
||
|
|
setTimeout(async () => {
|
||
|
|
console.clear();
|
||
|
|
const texture = await Threelium.loadTexture('https://assets.codepen.io/292951/3fb856c1-1399-4e9b-a2b3-74b8b094c618.sized-1000x1000.jpg');
|
||
|
|
ReactDOM.render(
|
||
|
|
React.createElement(Threelium.SceneView, {
|
||
|
|
camera:
|
||
|
|
React.createElement(Threelium.PerspectiveCamera, {
|
||
|
|
fov: 70,
|
||
|
|
near: 0.01,
|
||
|
|
far: 10000,
|
||
|
|
position: new THREE.Vector3(0, 0, 768) }),
|
||
|
|
|
||
|
|
|
||
|
|
controls:
|
||
|
|
React.createElement(Threelium.OrbitControls, {
|
||
|
|
minDistance: 64,
|
||
|
|
enabled: false }) },
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
React.createElement(MainScene, { texture })),
|
||
|
|
|
||
|
|
document.getElementById('js-app'));
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
class MainScene extends Threelium.Scene {
|
||
|
|
initialize({
|
||
|
|
renderer,
|
||
|
|
texture })
|
||
|
|
{
|
||
|
|
return (
|
||
|
|
React.createElement(React.Fragment, null,
|
||
|
|
React.createElement(AmbientLight, {
|
||
|
|
color: 0xffffff }),
|
||
|
|
|
||
|
|
React.createElement(Surface, _extends({
|
||
|
|
width: 1000,
|
||
|
|
height: 750 },
|
||
|
|
{
|
||
|
|
texture }))));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}}
|
||
|
|
|
||
|
|
|
||
|
|
class AmbientLight extends THREE.AmbientLight {
|
||
|
|
constructor({
|
||
|
|
color })
|
||
|
|
{
|
||
|
|
super(color);
|
||
|
|
}}
|
||
|
|
|
||
|
|
|
||
|
|
class Surface extends THREE.Mesh {
|
||
|
|
constructor({
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
texture })
|
||
|
|
{
|
||
|
|
const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
|
||
|
|
const material = new Threelium.EnhancedMaterial({
|
||
|
|
uniforms: {
|
||
|
|
uTime: { value: 0 },
|
||
|
|
uTexture: { value: null } },
|
||
|
|
|
||
|
|
varyingParameters: [`
|
||
|
|
varying vec2 vUv;
|
||
|
|
`],
|
||
|
|
vertexPosition: [`
|
||
|
|
vUv = uv;
|
||
|
|
`],
|
||
|
|
fragmentFunctions: [`
|
||
|
|
vec2 distort (in vec2 st, float time) {
|
||
|
|
vec2 p = st * 2.0 - 1.0;
|
||
|
|
return vec2(
|
||
|
|
p.x + sin(p.y * PI + uTime) / (PI * 2.0), // should this really be PI * 2?
|
||
|
|
p.y + sin(p.x * PI + uTime) / (PI * 2.0)
|
||
|
|
) / 2.0 - st + vec2(0.5);
|
||
|
|
}
|
||
|
|
`],
|
||
|
|
fragmentParameters: [`
|
||
|
|
uniform float uTime;
|
||
|
|
uniform sampler2D uTexture;
|
||
|
|
`],
|
||
|
|
fragmentDiffuse: [`
|
||
|
|
vec2 p = vUv + distort(vUv, uTime);
|
||
|
|
diffuseColor.rgb = texture2D(uTexture, p).rgb;
|
||
|
|
`] });
|
||
|
|
|
||
|
|
material.uniforms.uTexture.value = texture;
|
||
|
|
super(geometry, material);
|
||
|
|
}
|
||
|
|
|
||
|
|
get time() {
|
||
|
|
return this.material.uniforms.uTime.value;
|
||
|
|
}
|
||
|
|
|
||
|
|
set time(newTime) {
|
||
|
|
this.material.uniforms.uTime.value = newTime;
|
||
|
|
}}
|