Skip to content

Commit

Permalink
add bmap-three modification
Browse files Browse the repository at this point in the history
  • Loading branch information
@liyangyang0901
liyangyang0901 committed May 30, 2023
1 parent 9b6a740 commit c6d7559
Show file tree
Hide file tree
Showing 9 changed files with 395 additions and 7 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,6 @@ test/treeshake/stats.html
test/e2e/chromium
test/e2e/output-screenshots

**/node_modules
**/node_modules

bmap-three
27 changes: 27 additions & 0 deletions bmap-three-all.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
cd `dirname $0`
# 如果bmap-three目录不存在，创建目录
if [ ! -d "bmap-three" ]; then
mkdir bmap-three
fi

# 复制src -> bmap-three
cp -r src bmap-three
cp -r package.json bmap-three

# 如果不存在bmap-three/examples，则创建
if [ ! -d "bmap-three/examples" ]; then
mkdir bmap-three/examples
fi

cp -r examples/jsm bmap-three/examples
cp -r examples/fonts bmap-three/examples

cp -r build bmap-three
# 进入bmap-three目录
cd bmap-three

# 修改package.json的name字段，重新覆盖原来的文件
sed -i '' 's/"name": "three"/"name": "bmap-three"/g' package.json

# 替换examples目录下所有js文件中的import声明中的three为bmap-three，包含只import部分模块的情况
find examples -name "*.js" | xargs sed -i '' "s/from 'three';/from 'bmap-three';/g"
10 changes: 10 additions & 0 deletions bmap-three-copy-only.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
cd `dirname $0`

npm run build

# 如果bmap-three目录不存在，创建目录
if [ ! -d "bmap-three" ]; then
mkdir bmap-three
fi

cp -r build bmap-three
255 changes: 255 additions & 0 deletions examples/webgl_materials_pmrem_dynamic.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - dynamic cube reflection</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
touch-action: none;
}
</style>
</head>
<body>

<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - materials - dynamic cube reflection<br/>Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">J&oacute;n Ragnarsson</a>.</div>

<script type="module">

import * as THREE from '../build/three.module.js';

import Stats from './jsm/libs/stats.module.js';

let camera, scene, renderer, stats, pg;
let cube, sphere, torus, material;
let pgRenderTarget1, pgRenderTarget2;
let count = 0, cubeCamera1, cubeCamera2, cubeRenderTarget1, cubeRenderTarget2;

let onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;

let lon = 0, lat = 0;
let phi = 0, theta = 0;

const textureLoader = new THREE.TextureLoader();
const objectGroup = new THREE.Group();
textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg', function ( texture ) {

texture.encoding = THREE.sRGBEncoding;
texture.mapping = THREE.EquirectangularReflectionMapping;

init( texture );
animate();
// render();

} );

function init( texture ) {

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );

pg = new THREE.PMREMGenerator( renderer );

stats = new Stats();
document.body.appendChild( stats.dom );

scene = new THREE.Scene();
scene.background = texture;

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

//

// cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( 256 );

// cubeCamera1 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget1 );

// cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( 256 );

// cubeCamera2 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget2 );

//

pgRenderTarget1 = new THREE.WebGLRenderTarget( 768, 768, {
magFilter: THREE.LinearFilter,
minFilter: THREE.LinearFilter,
generateMipmaps: false,
type: THREE.HalfFloatType,
format: THREE.RGBAFormat,
encoding: THREE.LinearEncoding,
depthBuffer: false
} );
pgRenderTarget1.texture.mapping = THREE.CubeUVReflectionMapping;
pgRenderTarget1.texture.name = 'PMREM.cubeUv1';
pgRenderTarget1.scissorTest = true;
pgRenderTarget2 = new THREE.WebGLRenderTarget( 768, 768, {
magFilter: THREE.LinearFilter,
minFilter: THREE.LinearFilter,
generateMipmaps: false,
type: THREE.HalfFloatType,
format: THREE.RGBAFormat,
encoding: THREE.LinearEncoding,
depthBuffer: false
} );
pgRenderTarget2.texture.mapping = THREE.CubeUVReflectionMapping;
pgRenderTarget2.texture.name = 'PMREM.cubeUv2';
pgRenderTarget2.scissorTest = true;

material = new THREE.MeshStandardMaterial( {
// envMap: cubeRenderTarget2.texture,
roughness: 0.2,
metalness: 1
} );

sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 20, 8 ), material );
scene.add( sphere );

cube = new THREE.Mesh( new THREE.BoxGeometry( 20, 20, 20 ), material );
scene.add( cube );

torus = new THREE.Mesh( new THREE.TorusKnotGeometry( 10, 5, 128, 16 ), material );
scene.add( torus );

scene.add( new THREE.AmbientLight( 0xffffff, 0.5 ) );
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
dirLight.position.set( 1, 1, 1 );
// scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
scene.add( dirLight );
//

for ( let i = 0; i < 100; i ++ ) {
const mesh = new THREE.Mesh(new THREE.BoxGeometry( 10, 10, 10 ), new THREE.MeshStandardMaterial({
color: 0xaaaaaa,
metalness: 1,
}) );
mesh.position.set(Math.random() * 50, Math.random() * 50, Math.random() * 50);
objectGroup.add(mesh);
}
scene.add(objectGroup);

document.addEventListener( 'pointerdown', onPointerDown );
document.addEventListener( 'wheel', onDocumentMouseWheel );

window.addEventListener( 'resize', onWindowResized );

}

function onWindowResized() {

renderer.setSize( window.innerWidth, window.innerHeight );

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

}

function onPointerDown( event ) {

event.preventDefault();

onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;
onPointerDownLat = lat;

document.addEventListener( 'pointermove', onPointerMove );
document.addEventListener( 'pointerup', onPointerUp );

}

function onPointerMove( event ) {

lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

function onPointerUp() {

document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );

}

function onDocumentMouseWheel( event ) {

const fov = camera.fov + event.deltaY * 0.05;

camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );

camera.updateProjectionMatrix();

}

function animate() {

requestAnimationFrame( animate );

const time = Date.now();

lon += .15;

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.MathUtils.degToRad( 90 - lat );
theta = THREE.MathUtils.degToRad( lon );

cube.position.x = Math.cos( time * 0.001 ) * 30;
cube.position.y = Math.sin( time * 0.001 ) * 30;
cube.position.z = Math.sin( time * 0.001 ) * 30;

cube.rotation.x += 0.02;
cube.rotation.y += 0.03;

torus.position.x = Math.cos( time * 0.001 + 10 ) * 30;
torus.position.y = Math.sin( time * 0.001 + 10 ) * 30;
torus.position.z = Math.sin( time * 0.001 + 10 ) * 30;

torus.rotation.x += 0.02;
torus.rotation.y += 0.03;

camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
camera.position.y = 100 * Math.cos( phi );
camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( scene.position );

// pingpong

objectGroup.visible = false;
if ( count % 2 === 0 ) {

// cubeCamera1.update( renderer, scene );
pgRenderTarget1 = pg.fromSceneToRenderTarget( scene, pgRenderTarget1, pgRenderTarget2, 0, 0.1, 100 );
scene.environment = pgRenderTarget1.texture;

} else {

pgRenderTarget2 = pg.fromSceneToRenderTarget( scene, pgRenderTarget2, pgRenderTarget1, 0, 0.1, 100 );
scene.environment = pgRenderTarget2.texture;

}

objectGroup.visible = true;
count ++;

render();

stats.update();

}

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
Loading

0 comments on commit c6d7559

Please sign in to comment.