Архив метки: 3D

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