Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Save props
let _props = {
image,
tilesHoriz,
tilesVert,
numTiles,
tileDispDuration,
filter,
size,
position,
...props
};
Object.keys(_props).map(v => (this[`__${v}`] = _props[v]));
this._texture = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(image)
});
/// Preserve Pixel Texture - no smoothing
this._texture.magFilter = this._texture.minFilter = filter;
this.animation = new TextureAnimator(
this._texture,
tilesHoriz,
tilesVert,
numTiles,
tileDispDuration
); // texture, #horiz, #vert, #total, duration.
this.material = new THREE.MeshBasicMaterial({
map: this._texture,
transparent: true
});
_setupScene = async () => {
const { innerWidth: width, innerHeight: height } = window;
// Initialize Three.JS
const texture = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../assets/images/particle.png')),
});
const flame = new Flame(texture);
const scale = 100;
flame.scale.set(scale, scale, scale);
scene.add(flame);
const speed = 0.002;
};
setTimeout(function () {
tween.start();
}, timer);
}
}
if (data.fireDensity) {
for (var i = 0; i < data.fireDensity; i = i + 1) {
var distUpTree = data.height * 0.8 * (2 / 3) + Math.random() * 0.2 * (2 / 3);
var distUpTreeVec = dirVec.clone().multiplyScalar(distUpTree);
var fireSize = Math.random() * data.height / 1.5 + data.height * 2;
var fireGeo = new THREE.PlaneGeometry(fireSize, fireSize);
//fire2.png
var explosionTexture = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(images.fire),
});
this.explosions.push(new TextureAnimator(explosionTexture, 4, 4, 16, 90)); // texture, #horiz, #vert, #total, duration.
var fireMat = new THREE.MeshBasicMaterial({
map: explosionTexture,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false,
alphaTest: 0.5
//blending: THREE.AdditiveBlending
});
var fire = new THREE.Mesh(fireGeo, fireMat);
fire.rotation.x = Math.random() * Math.PI * 2;
fire.rotation.y = Math.random() * Math.PI * 2;
fire.rotation.z = Math.random() * Math.PI * 2;
}) => {
this.renderer = ExpoTHREE.createRenderer({
gl,
canvas,
width,
height,
pixelRatio,
});
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
this.camera.position.z = 5;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const asset = Asset.fromModule(Assets.icons['ios.png']);
await asset.downloadAsync();
const map = await ExpoTHREE.createTextureAsync({ asset });
const material = new THREE.MeshBasicMaterial({
// NOTE: How to create an Expo-compatible THREE texture
map,
});
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
};
_onGLContextCreate = async (gl) => {
const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
this.scene = this.configureScene();
const camera = this.configureCamera({ width, height });
// roll-over helpers
this.rollOverGeo = new THREE.BoxGeometry(50, 50, 50);
this.rollOverMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true });
this.rollOverMesh = new THREE.Mesh(this.rollOverGeo, this.rollOverMaterial);
this.scene.add(this.rollOverMesh);
// cubes
this.cubeGeo = new THREE.BoxGeometry(50, 50, 50);
var cubeTex = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../assets/images/square-outline-textured.png')),
});
this.cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xfeb74c, map: cubeTex });
// grid
var size = 500, step = 50;
var geometry = new THREE.Geometry();
for (var i = - size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(- size, 0, i));
geometry.vertices.push(new THREE.Vector3(size, 0, i));
geometry.vertices.push(new THREE.Vector3(i, 0, - size));
geometry.vertices.push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2, transparent: true });
var line = new THREE.LineSegments(geometry, material);
_setupScene = async () => {
const { innerWidth: width, innerHeight: height } = window;
const geometry = new THREE.SphereBufferGeometry(500, 60, 40);
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale(-1, 1, 1);
const material = new THREE.MeshBasicMaterial({
// NOTE: How to create an Expo-compatible THREE texture
map: await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../assets/images/nik.png')),
}),
});
const mesh = new THREE.Mesh(geometry);
this.scene.add(mesh);
const helperGeometry = new THREE.BoxBufferGeometry(100, 100, 100, 4, 4, 4);
const helperMaterial = new THREE.MeshBasicMaterial({
color: 0xff00ff,
wireframe: true,
});
const helper = new THREE.Mesh(helperGeometry, helperMaterial);
this.scene.add(helper);
};
// cloth mesh
let object = new THREE.Mesh(this.clothGeometry, clothMaterial);
object.position.set(0, 0, 0);
object.castShadow = true;
this.scene.add(object);
object.customDepthMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.DoubleSide,
});
this.configureSphere();
// ground
var groundTexture = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(
require('../assets/images/grasslight-big.jpg')
),
});
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(25, 25);
groundTexture.anisotropy = 16;
var groundMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
specular: 0x111111,
map: groundTexture,
});
var mesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(20000, 20000),
groundMaterial
);
_onGLContextCreate = async (gl) => {
const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
gl.createFramebuffer = () => null;
gl.createRenderbuffer = () => null;
gl.bindRenderbuffer = (target, renderbuffer) => { };
gl.renderbufferStorage = (target, internalFormat, width, height) => { };
gl.framebufferTexture2D = (target, attachment, textarget, texture, level) => { };
gl.framebufferRenderbuffer = (target, attachmebt, renderbuffertarget, renderbuffer) => { };
this.scene = this.configureScene();
const camera = this.configureCamera({ width, height });
this.controls = new THREE.OrbitControls(camera);
this.setupLights();
var cloud = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../assets/images/cloud.png')),
});
var lavatile = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../assets/images/lavatile.jpg')),
});
var textureLoader = new THREE.TextureLoader();
let uniforms = {
fogDensity: { value: 0.45 },
fogColor: { value: new THREE.Vector3(0, 0, 0) },
time: { value: 1.0 },
resolution: { value: new THREE.Vector2() },
uvScale: { value: new THREE.Vector2(3.0, 1.0) },
texture1: { value: cloud },
texture2: { value: lavatile }
};
const createCubeMesh = async ({ scene, gl }) => {
const geometry = new THREE.BoxGeometry(40, 40, 70);
const material = new THREE.MeshBasicMaterial({
transparent: true,
opacity: 0.7,
map: await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('./assets/ice.jpg')),
}),
});
const cube = new THREE.Mesh(geometry, material);
cube.position.y = getRandomArbitrary(-60, 60);
scene.add(cube);
return cube;
};
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1,
1000
);
const renderer = ExpoTHREE.createRenderer({ gl });
renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
renderer.setClearColor(0xffffff);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
transparent: true,
map: await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('../../assets/images/nikki.png')),
}),
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 3;
return {
onTick() {
cube.rotation.x += 0.04;
cube.rotation.y += 0.07;
renderer.render(scene, camera);
gl.endFrameEXP();