/**
* prefetch
* Request a load and then add to cache
*/
prefetch(uri) {
if (uri == null) {
return;
}
if (Array.isArray(uri)) {
// Cubemap, check proper format
if (uri.length !== 6 || !uri[0].uri) {
console.warn(
'Prefetch expected cubemap source in format [{uri: http..}, {uri: http..}, ... ]'
);
return;
}
// Transform the input array into an array of url strings for threejs to load.
const urls = uri.map(RCTPrefetch.getUri);
const loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin('Access-Control-Allow-Origin');
loader.load(urls, texture => RCTPrefetch.addToCache(uri, texture), () => {}, () => {});
} else {
// Panorama
const url = RCTPrefetch.getUri(uri);
const loader = new THREE.TextureLoader();
loader.setCrossOrigin('Access-Control-Allow-Origin');
loader.load(url, texture => RCTPrefetch.addToCache(uri, texture), () => {}, () => {});
}
}
const loadRemoteTexture = (url, onLoad, viewID) => {
// When a url is null or undefined, send undefined to onLoad callback
const onError = () => onLoad(undefined, viewID);
const onLoadDisposable = texture => {
texture._needsDispose = true;
onLoad(texture, viewID);
};
// No progress indication for now.
const onProgress = undefined;
if (url == null) {
onError();
} else if (Prefetch.isCached(url)) {
// First Check if the texture hasn't already been prefetched
const cachedTexture = Prefetch.getFromCache(url);
onLoad(cachedTexture, viewID);
} else if (Array.isArray(url)) {
const loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin('Access-Control-Allow-Origin');
loader.load(url, onLoadDisposable, onProgress, onError);
} else {
const loader = new THREE.TextureLoader();
loader.setCrossOrigin('Access-Control-Allow-Origin');
loader.load(url, onLoadDisposable, onProgress, onError);
}
};
function makeSkyBox(folderName,situation)
{
var path = "sky/" + folderName + "/";
var format = '.jpg';
var urls =
[
path + 'posx' + format,
path + 'negx' + format,
path + 'posy' + format,
path + 'negy' + format,
path + 'posz' + format,
path + 'negz' + format
];
var loader = new THREE.CubeTextureLoader();
loader.load(urls,function(texture)
{
texture.format = THREE.RGBFormat;
texture.mapping = THREE.CubeReflectionMapping;
var material = new THREE.ShaderMaterial(
{
fragmentShader: THREE.ShaderChunk['cube_frag'],
vertexShader: THREE.ShaderChunk['cube_vert'],
uniforms:
{
"tCube": { type: "t", value: texture },
"tFlip": { type: "f", value: - 1 }
},
depthWrite: false,
side: THREE.BackSide
});
var skybox = new THREE.Mesh(new THREE.BoxGeometry(300000, 300000, 300000), material);
situation.add(skybox);
},function() {console.log('天空盒图片加载失败'); });
}
constructor() {
const geometry = new BoxGeometry(32, 32, 32),
{ fragmentShader, vertexShader, uniforms } = ShaderLib.cube,
loader = new CubeTextureLoader();
uniforms.tCube.value = loader.load(TEXTURE);
const material = new ShaderMaterial({
fragmentShader,
vertexShader,
uniforms,
depthWrite: false,
side: BackSide,
});
this.mesh = new Mesh(geometry, material);
}
function createCubeMap(folderName,bottom)
{
var path = "sky/"+folderName+"/";
var format = '.jpg';
var urls =
[
path + 'posx' + format,
path + 'negx' + format,
path + 'posy' + format,
path + 'negy' + format,
path + 'posz' + format,
path + 'negz' + format
];
if (bottom&&bottom==true) { urls[3] = path + 'negy.png';}
var loader = new THREE.CubeTextureLoader();
var textureCube = loader.load(urls);
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
return textureCube;
}
setupLogic: function(canvas) {
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = -700;
camera.position.x = 500;
camera.position.y = -100;
scene = new THREE.Scene();
var textureCubeLoader = new THREE.CubeTextureLoader();
textureCubeLoader.setPath( '/images/textures/cube/bridge/');
var textureCube = textureCubeLoader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
scene.background = textureCube;
sceneCube = new THREE.Scene();
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
// Skybox
var cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 5000, 5000, 5000 ), cubeMaterial );
sceneCube.add( cubeMesh );
var material = new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } )
//material = new THREE.MeshNormalMaterial();
var size = 3;
var geometry = new THREE.BoxGeometry( 10*size, 10*size, 10*size );
//geometry = new THREE.SphereGeometry( 10.0*size, 24, 24 );
group = new THREE.Group();
for ( var i = 0; i < 160; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = (Math.random() * 200 - 100)*size;
mesh.position.y = (Math.random() * 200 - 100)*size;
mesh.position.z = (Math.random() * 200 - 100)*size;
mesh.rotation.x = (2 - Math.random() * 4) * Math.PI;
mesh.rotation.y = (2 - Math.random() * 4) * Math.PI;
mesh.rotation.z = (2 - Math.random() * 4) * Math.PI;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add( mesh );
}
scene.add( group );
//Lights
var ambient = new THREE.AmbientLight( 0x050505 );
scene.add( ambient );
var pointLight = new THREE.PointLight( 0xffaa00, 2 );
pointLight.position.set( 2000, 1200, 10000 );
scene.add( pointLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 2, 1.2, 10 ).normalize();
scene.add( directionalLight );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( -2, 1.2, -10 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
var mouseX = 0, mouseY = 0;
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
shakeAmount = 0;
function onClick(event) {
shakeAmount = 20;
}
document.addEventListener( 'click', onClick, false );
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
cameraCube.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );
},