Почему не удаётся загрузить текстуру управляемого куба с компьютера?
Измучился пробовать, но так и не нашёл почему не грузится с компьютера текстура, только из сети.
Если посетителей будет много, подчищу код. А пока, извините,не заметил, что черновик. Можно поиграться с кубиком всеми кнопками и колёсиком мыши: лев. Вращает, колесо приближает, правая переносит в сторону. Буду благодарен тем , кто попробует у себя вставлять имя файла вместо URL текстуры и расскажет о результате.
<!DOCTYPE html>
<html>
<head>
<!meta charset="utf-8">
<title>Текстура куба</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
let tt=" колесо=размер / "
document.write("левой крутить можно,",tt, " правой сдвинуть" ) ;
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 1000);//размер куба колёсиком / 0.5
camera.position.set(0, 0, 5);// вбухать сюда цикл и менять положение камеры, увеличить куб-колёсиком!
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
let textureLoader = new THREE.TextureLoader();
let texture1 = textureLoader.load('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/An_example_of_texture.jpg/120px-An_example_of_texture.jpg?20100414131741'); // Вот здесь надо пробовать вставить название файла картинки
let texture2 = textureLoader.load('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/An_example_of_texture.jpg/800px-An_example_of_texture.jpg?20100414131741');
//let texture = textureLoader.load('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/An_example_of_texture.jpg/120px-An_example_of_texture.jpg?20100414131741');
//https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/An_example_of_texture.jpg/800px-An_example_of_texture.jpg?20100414131741');
//https://www.meme-arsenal.com/memes/c22378ade797ced2cc3011f0fa456937.jpg');//textures/colorPI.jpgэту ссылку поменять (работает только из сети)
//setTimeout(() => animate , 1000, 'Привет' , 'Привет2');
let texture ;
//let geometry ;= new THREE.BoxGeometry();
let material
//let cube ;= new THREE.Mesh(geometry, material);
function mate( ) {
tt = "крутить";}
texture = texture1;
let geometry = new THREE.BoxGeometry();
material = new THREE.MeshBasicMaterial({map: texture});
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//setTimeout(()=>", 5000 , "Привет");document.write(tt);
//let material = new THREE.MeshBasicMaterial({map: texture});
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.0011;
cube.rotation.y += 0.0011;
renderer.render(scene, camera);
}
tt="всеми кнопками мыши двигать ";
texture = texture2;
mate(tt);
animate();
//alert(tt);
tt=tt+ " и колёсиком";
//alert(tt);
</script>
</body>
</html>
|
Там возникает ошибка CORS
Access to image at '????_texture.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted. Библиотека считывает картинку в элемент IMG с параметром crossorigin="anonymous" Если сервер, с которого считывается картинка не предоставит требуемые заголовки, то доступ к такой картинке будет ограничен. https://developer.mozilla.org/ru/doc...tr-crossorigin Но при считывании локальной картинки никакого сервера нет. Поэтому нет и заголовков. |
Есть способ запустить Three.js локально. Я пробовал - работает. https://customizer.github.io/three.j...hree.js-ru.htm
|
Цитата:
Конкретно для себя любимого это можно сделать. Но в общем случае это плохой "выход". |
Благодарю, что откликнулись и дали исчерпывающие ответы
Цитата:
Сейчас оказалось не найти , даже, места, где свои фотки разместить, чтобы забирались по ссылке(Гугл фото не позволяет это делать). И как корректно загрузить себе эти библиотеки, я их просто копировал с ХТМЛ странички. Так исказились или можно пробовать и будут работать? |
Цитата:
|
| Часовой пояс GMT +3, время: 04:09. |