|
@@ -26,6 +26,7 @@
|
|
import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
import { OrbitControls } from './jsm/controls/OrbitControls.js';
|
|
import { OrbitControls } from './jsm/controls/OrbitControls.js';
|
|
import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
|
|
import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
|
|
|
|
+ import Stats from "./jsm/libs/stats.module.js";
|
|
|
|
|
|
import {
|
|
import {
|
|
NodeFrame,
|
|
NodeFrame,
|
|
@@ -41,13 +42,9 @@
|
|
NormalMapNode,
|
|
NormalMapNode,
|
|
} from './jsm/nodes/Nodes.js';
|
|
} from './jsm/nodes/Nodes.js';
|
|
|
|
|
|
- // scene size
|
|
|
|
- const WIDTH = window.innerWidth;
|
|
|
|
- const HEIGHT = window.innerHeight;
|
|
|
|
-
|
|
|
|
// camera
|
|
// camera
|
|
const VIEW_ANGLE = 45;
|
|
const VIEW_ANGLE = 45;
|
|
- const ASPECT = WIDTH / HEIGHT;
|
|
|
|
|
|
+ let aspect = window.innerWidth / window.innerHeight;
|
|
const NEAR = 1;
|
|
const NEAR = 1;
|
|
const FAR = 500;
|
|
const FAR = 500;
|
|
|
|
|
|
@@ -68,18 +65,22 @@
|
|
|
|
|
|
const frame = new NodeFrame();
|
|
const frame = new NodeFrame();
|
|
|
|
|
|
|
|
+ let groundMirrorRenderTarget;
|
|
|
|
+ let stats;
|
|
|
|
+ let blurMirror;
|
|
|
|
+
|
|
function init() {
|
|
function init() {
|
|
|
|
|
|
// renderer
|
|
// renderer
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
- renderer.setSize( WIDTH, HEIGHT );
|
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
// scene
|
|
// scene
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
// camera
|
|
// camera
|
|
- camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
|
|
|
|
|
|
+ camera = new THREE.PerspectiveCamera( VIEW_ANGLE, aspect, NEAR, FAR );
|
|
camera.position.set( 0, 75, 160 );
|
|
camera.position.set( 0, 75, 160 );
|
|
|
|
|
|
cameraControls = new OrbitControls( camera, renderer.domElement );
|
|
cameraControls = new OrbitControls( camera, renderer.domElement );
|
|
@@ -91,6 +92,23 @@
|
|
const container = document.getElementById( 'container' );
|
|
const container = document.getElementById( 'container' );
|
|
container.appendChild( renderer.domElement );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
+ stats = new Stats();
|
|
|
|
+ document.body.appendChild( stats.dom );
|
|
|
|
+
|
|
|
|
+ window.addEventListener( "resize", onWindowResize, false );
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function onWindowResize() {
|
|
|
|
+
|
|
|
|
+ aspect = window.innerWidth / window.innerHeight;
|
|
|
|
+ camera.aspect = aspect;
|
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
|
+
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
+ groundMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
|
|
|
|
+ blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
|
|
|
|
+ blurMirror.updateFrame()
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
function fillScene() {
|
|
function fillScene() {
|
|
@@ -101,7 +119,12 @@
|
|
|
|
|
|
// reflector/mirror plane
|
|
// reflector/mirror plane
|
|
geometry = new THREE.PlaneGeometry( 100, 100 );
|
|
geometry = new THREE.PlaneGeometry( 100, 100 );
|
|
- const groundMirror = new ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
|
|
|
|
|
|
+ const groundMirror = new ReflectorRTT( geometry, {
|
|
|
|
+ clipBias: 0.003,
|
|
|
|
+ textureWidth: window.innerWidth * window.devicePixelRatio,
|
|
|
|
+ textureHeight: window.innerHeight * window.devicePixelRatio
|
|
|
|
+ } );
|
|
|
|
+ groundMirrorRenderTarget = groundMirror.getRenderTarget()
|
|
|
|
|
|
const mask = new SwitchNode( new TextureNode( decalDiffuse ), 'w' );
|
|
const mask = new SwitchNode( new TextureNode( decalDiffuse ), 'w' );
|
|
|
|
|
|
@@ -126,8 +149,8 @@
|
|
OperatorNode.MUL
|
|
OperatorNode.MUL
|
|
);
|
|
);
|
|
|
|
|
|
- const blurMirror = new BlurNode( mirror );
|
|
|
|
- blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
|
|
|
|
|
|
+ blurMirror = new BlurNode( mirror );
|
|
|
|
+ blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
|
|
blurMirror.uv = new ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
|
|
blurMirror.uv = new ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
|
|
blurMirror.uv.keywords[ "projCoord" ] = new OperatorNode( mirror.offset, mirror.uv, OperatorNode.ADD );
|
|
blurMirror.uv.keywords[ "projCoord" ] = new OperatorNode( mirror.offset, mirror.uv, OperatorNode.ADD );
|
|
blurMirror.radius.x = blurMirror.radius.y = 0;
|
|
blurMirror.radius.x = blurMirror.radius.y = 0;
|
|
@@ -263,6 +286,7 @@
|
|
|
|
|
|
render();
|
|
render();
|
|
|
|
|
|
|
|
+ stats.update();
|
|
}
|
|
}
|
|
|
|
|
|
init();
|
|
init();
|