3d Програмиране с three.js
<html>
<head>
<script src="jquery-2.1.1.js"></script>
<script src="three.js"></script>
</head>
<body>
<canvas>
</canvas>
</body>
</html>
var $canvas = $('canvas');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
55,
$canvas.innerWidth() / $canvas.innerHeight(),
1, 1000
);
var renderer = new THREE.WebGLRenderer({
canvas: $canvas[0],
antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize($canvas.innerWidth(), $canvas.innerHeight());
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
cube.rotation.x = 0.3;
cube.rotation.y = 0.3;
Светлини и материали
Phong модел
Phong модел
var material = new THREE.MeshPhongMaterial({
color: 0x00ff00,
specular: 0x009900,
ambient: 0x005500
});
var light = new THREE.HemisphereLight(
0xaaaaaa, 0x999999
);
scene.add(light);
Координатна система
Оглеждане
window.FPSControls = function(camera, el) {
// jquery.pointerlock.js
$(el).pointerLock({
on: 'click',
until: null,
fullscreenElement: el,
movement: function(movementX, movementY) {
updateCamera(movementX, movementY);
}
});
};
Оглеждане
camera.rotation.set(0, 0, 0);
var pitch = new THREE.Object3D();
pitch.add(camera);
var yaw = new THREE.Object3D();
yaw.add(pitch);
yaw.position.y = height;
Оглеждане
var updateCamera = function(movementX, movementY) {
yaw.rotation.y -= movementX * 0.002;
pitch.rotation.x -= movementY * 0.002;
pitch.rotation.x = Math.max(
-Math.PI/2,
Math.min(Math.PI/2, pitch.rotation.x)
);
};
Движение
window.FPSControls = function(camera, el) {
var speedCoefficient = 200;
var slowdownCoefficient = 5;
var velocity = new THREE.Vector3();
var time = null;
var prevTime = performance.now();
};
Движение
$(document).on('keydown', function(e) {
switch (e.keyCode) {
case 87: moveForward = true; break; // w
case 65: moveLeft = true; break; // a
case 83: moveBackward = true; break; // s
case 68: moveRight = true; break; // d
}
});
Движение
$(document).on('keyup', function(e) {
switch (e.keyCode) {
case 87: moveForward = false; break; // w
case 65: moveLeft = false; break; // a
case 83: moveBackward = false; break; // s
case 68: moveRight = false; break; // d
}
});
Движение
this.update = function() {
time = performance.now();
var delta = (time - prevTime) / 1000;
prevTime = time;
var c = speedCoefficient;
if (moveForward) { velocity.z -= c * delta; }
if (moveBackward) { velocity.z += c * delta; }
if (moveLeft) { velocity.x -= c * delta; }
if (moveRight) { velocity.x += c * delta; }
}
Движение
var c = slowdownCoefficient;
velocity.x -= velocity.x * c * delta;
velocity.z -= velocity.z * c * delta;
Движение
yaw.translateX(velocity.x * delta);
yaw.translateZ(velocity.z * delta);
Скачане
Скачане
var isOnFloor = function() {
return (yaw.position.y <= height);
};
$(document).on('keydown', function(e) {
switch (e.keyCode) {
case 32: // space
if (isOnFloor()) { velocity.y += jumpSpeed; }
break;
}
});
Скачане
this.update = function() {
var G = 9.8;
var mass = 20;
velocity.y -= mass * G * delta;
yaw.translateX(velocity.x * delta);
yaw.translateY(velocity.y * delta);
yaw.translateZ(velocity.z * delta);
if (isOnFloor()) {
velocity.y = 0;
yaw.position.y = height;
}
};
Приложения
- 3d принтиране
- Панорами
- Тази презентация
- Забавление!
Gone Home
Mass Effect
A Slower Speed of Light
Three.js == Fun
Благодаря
Въпроси?
