Javascript: Простейшая программа на three.js

Пример взят из документации с 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 } );, а следующую закоментировать.

Canvas: getContext is not a function

Проблема «getContext is not a function» наблюдается, если canvas создаётся динамически, или просто сразу не имеет id, когда хотим получить от него getContext (2d).

Рабочее решение при использовании jQuery:

var context = $(".SomeClass").get(0).getContext("2d");

Здесь SomeClass — класс, присвоенный canvas без id, всё отработает без ошибок

Страница для перенаправления посетителей на другую страницу

HTML-код страницы для перенаправления посетителей на другую страницу:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"> window.location.href="http://kmsvsr.ru/"; </script>
    <meta http-equiv="refresh" content="0; URL=http://kmsvsr.ru/">
</head>
</html>

 

Обзор каруселей на javascript

Обзор каруселей на javascript со ссылками на примеры — Image Gallery With CSS & jQuery | jQuery/CSS/Script | WebDesign | blognews | AlexWolkov | Life & Live.

Моя любимая — http://www.professorcloud.com/mainsite/carousel.htm