After implementing the code snippet from the webgl_mirror example, I attempted to add a reflector surface to my scene.
It seems that the following code snippet is all that's needed to introduce a reflective object to the scene:
var geometry = new THREE.CircleBufferGeometry( 40, 64 );
var groundMirror = new Reflector( geometry, {
clipBias: 0.003,
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT * window.devicePixelRatio,
color: 0x777777,
recursion: 1
} );
groundMirror.position.y = 0.5;
groundMirror.rotateX( - Math.PI / 2 );
scene.add( groundMirror );
This is my current setup for calling scripts within my HTML:
<script
type="text/javascript"
src="index.js"
></script>
<link rel="stylesheet" type="text/css" href="/stylesheet.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65xxx0xxxv6">[email protected]</a>/lib/anime.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script src="Reflector.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
At the moment, Reflector.js and index.js are located in the root directory of my project.
Despite my efforts, I keep encountering the following error:
Reflector is not defined at window.onload