Пример взят из документации с threejs.org, статья со всеми комментариями «Введение — Создание сцены». Вместо заливки цветом вставлена загрузка текстуры из файла-картинки.Код работающего примера:
<html>
<head>
<title>My first Three.js app</title>
<style>
canvas {
width: 100%;
height: 100%
}</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
// Our Javascript will go here.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CubeGeometry(3,3,3);
//var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('tex.jpg') } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
В результате рисуется вращающийся кубик. Чтоб было что-то видно, надо либо рядом с файлом примера положить картинку tex.jpg, либо раскоментировать строку var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );, а следующую закоментировать.