I'm facing a couple of issues with implementing three.js on my WordPress page.
First: I'm struggling to import GLTFLoader. When I try, I receive the error message: "Uncaught TypeError: Failed to resolve module specifier "THREE/examples/jsm/loaders/GLTFLoader.js". Relative references must start with either "/", "./", or "../"." Even when I use "/" it attempts to import from my server and "//" looks for https://three/examples/, both of which are not working as intended.
Here's an excerpt of my code:
<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
import * as THREE from '//cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2bea4b3b396e6f8e7e4eff8e6">[email protected]</a>';
import {GLTFLoader} from 'THREE/examples/jsm/loaders/GLTFLoader.js'
</script>
<script>
//load 3d model
const loader = new GLTFLoader();
loader.load( 'https://www.historia3d.pl/wp-content/uploads/2021/05/mini_3D02.glb', function ( gltf ) {
model = gltf.scene.children[0];
model.scale.set(0.5,0.5,0.5);
scene.add( gltf.scene );
},
undefined, function ( error ) {
console.error( error );
} );
</script>
Second: I would like to utilize OrbitControls, but specifically track mouse position only when the cursor is hovering over the canvas.
The code snippet:
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);