In my attempt to construct a Sky Box using three.js, I successfully created the cube and applied textures. However, I am now faced with the task of incorporating camera controls. After creating the OrbitControls.js file and implementing the necessary code, I encountered an error when trying to utilize
let controls = new OrbitControls( camera, renderer.domElement );GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found)<script type="module" src="three.module.js"></script>Below is my JS code along with the script tags that import three.js:
<body>
<script src="three.js"></script>
<script type="module" src="three.module.js"></script>
<script type="module">
import { OrbitControls } from "./OrbitControls.js"
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = []
let texture_ft = new THREE.TextureLoader().load("cocoa_ft.jpg");
let texture_bk = new THREE.TextureLoader().load("cocoa_bk.jpg");
let texture_up = new THREE.TextureLoader().load("cocoa_up.jpg");
let texture_dn = new THREE.TextureLoader().load("cocoa_dn.jpg");
let texture_rt = new THREE.TextureLoader().load("cocoa_rt.jpg");
let texture_lf = new THREE.TextureLoader().load("cocoa_lf.jpg");
material.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
material.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
material.push(new THREE.MeshBasicMaterial( { map: texture_up }));
material.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
material.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
material.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
let controls = new OrbitControls( camera, renderer.domElement );
</script>
</body>