Я пытаюсь создать Sky Box с помощью three.js, создал куб и применил текстуры, однако теперь мне нужно импортировать элементы управления камерой. Сначала я создал файл OrbitControls.js (с правильным кодом внутри), но когда я пытаюсь использовать let controls = new OrbitControls( camera, renderer.domElement ); для добавления элементов управления, я получаю сообщение об ошибке GET https://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) при попытке использовать элементы управления орбитой с three.js. Я добавил файл three.module.js и нашел для него код. добавил его в свой HTML-код с помощью <script type="module" src="three.module.js"></script>, но я все еще получаю вышеупомянутую ошибку.
Вот мой JS и теги скриптов, которые получают 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>
вышеупомянутая ошибка означает, что на вашем сервере нет такого файла. — person Reuben schedule 22.03.2021
Скорее всего, это проблема с каталогом файлов. Когда вы используете
src="three.module.js"в своем HTML-файле, вы сообщаете браузеру, что ваши.htmlиthree.module.jsфайлы находятся в одной папке. Вероятно, вам придется изменить src, чтобы он фактически указывал на расположение файла JavaSript:src="../three.module.js"это поднимается на одну папку вверхsrc="./subfolder/three.module.js"это входит в подпапкуПросто посмотрите на структуру папок и попытайтесь указать правильное место. То же самое и с OrbitControls.