Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
onContextCreate = async ({ gl, canvas, width, height, scale }) => {
// Based on https://threejs.org/docs/#manual/introduction/Creating-a-scene
// In this case we instead use a texture for the material (because textures
// are cool!). All differences from the normal THREE.js example are
// indicated with a `NOTE:` comment.
// NOTE: How to create an `Expo.GLView`-compatible THREE renderer
this.renderer = ExpoTHREE.createRenderer({ gl, canvas });
this.renderer.setPixelRatio(scale);
this.renderer.setSize(width, height);
this.renderer.setClearColor(0x000000, 1.0);
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);
let map;
if (Platform.OS === 'web') {
map = require('./assets/icons/app-icon.png');
} else {
map = await ExpoTHREE.loadAsync(require('./assets/icons/app-icon.png'));
}
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);
};
setupCamera({ width, height }) {
this.camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 200);
// this.camera.position.z = 400;
this.camera.position.set(0, 0, 2);
this.camera.lookAt(new THREE.Vector3());
}
onContextCreate = async ({
gl,
canvas,
width,
height,
scale: pixelRatio,
}) => {
this.renderer = new ExpoTHREE.Renderer({
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 map = await ExpoTHREE.loadAsync(Assets.icons['ios.png']);
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);
this.cubeTexture = new ExpoTHREE.CubeTexture();
await this.cubeTexture.loadAsync({
assetForDirection: direction => Assets.skybox[direction + '.jpg'],
});
this.scene.background = this.cubeTexture;
onContextCreate = async ({
gl,
canvas,
width,
height,
scale: pixelRatio,
}) => {
this.renderer = new ExpoTHREE.Renderer({
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 map = await ExpoTHREE.loadAsync(Assets.icons['ios.png']);
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);
};
onContextCreate = async ({
gl,
canvas,
width,
height,
scale: pixelRatio,
}) => {
this.renderer = new ExpoTHREE.Renderer({
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 map = await ExpoTHREE.loadAsync(Assets['icon.png']);
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);
};
setupCamera({ width, height }) {
this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 20000);
this.camera.position.z = 400;
}
}
setupCamera({ width, height }) {
this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 5000);
this.camera.position.z = 400;
this.camera.lookAt(new THREE.Vector3());
}
this.height = height || 512;
this.aspectRatio = aspectRatio || this.width / this.height;
this.nearPlane = nearPlane || 1;
this.farPlane = farPlane || 10000;
this.skyColor = skyColor || 0xbfd1e5;
this.ortho = ortho;
this.camera = this.ortho
? new THREE.OrthographicCamera(
this.width / -2,
this.width / 2,
this.height / 2,
this.height / -2,
this.nearPlane,
this.farPlane,
)
: new THREE.PerspectiveCamera(
this.fov,
this.aspectRatio,
this.nearPlane,
this.farPlane,
);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
this.context = context;
this.createRenderer({
fov,
width,
height,
aspectRatio,
nearPlane,
farPlane,
skyColor,
ortho,
setupCamera({ width, height }) {
this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 10000);
this.camera.position.set(0, 6, 12);
this.camera.lookAt(0, 0, 0);
}
setupCamera({ width, height }) {
this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 5000);
this.camera.position.z = 400;
this.camera.lookAt(new THREE.Vector3());
}