Начал изучать three.js, и появились первые проблемы.
Вот что получается в браузере:
И сам код:
$(function () {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight,
0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1)
renderer.setSize(window.innerWidth, window.innerHeight);
// Добавляем Оси
var axes = new THREE.AxisHelper( 20 );
scene.add(axes);
// Создаём, настраиваем и добавляем плоскость
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshLambertMaterial(
{color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
// Создаём, настраиваем и добавляем куб и сферу
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial(
{color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial =new THREE.MeshLambertMaterial(
{color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
// Позиция камеры и рендеринг
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
$('#WebGL-output').append(renderer.domElement);
renderer.render(scene, camera);
// Добовляем освещение
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
});
