Измучился пробовать, но так и не нашёл почему не грузится с компьютера текстура, только из сети.
Если посетителей будет много, подчищу код. А пока, извините,не заметил, что черновик.
Можно поиграться с кубиком всеми кнопками и колёсиком мыши:
лев. Вращает, колесо приближает, правая переносит в сторону.
Буду благодарен тем , кто попробует у себя вставлять имя файла вместо 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>