jQuery(document).ready(function($) {
if ($('#three_canvas').length > 0) {
var container, stats;
var camera, controls, scene, renderer;
var objects = [],plane;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;
function init() {
var loader = new THREE.JSONLoader();
var url = wp_custom.template_url;
container = document.getElementById("three_canvas");
camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 5000);
camera.position.z = 1000;
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = .1;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(0, 500, 2000);
light.castShadow = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
light.shadowBias = -0.00022;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
scene.add(light);
//geometry = new THREE.IcosahedronGeometry(10, 2);
//geometry = new THREE.OctahedronGeometry(10, 0);
//geometry = new THREE.TetrahedronGeometry(10, 0);
//geometry = new THREE.CylinderGeometry( 10, 0, 20, 64, 10,false);
geometry = new THREE.BoxGeometry(250, 250, 250);
var a = [new THREE.Vector2(.25, .666), new THREE.Vector2(.5, .666), new THREE.Vector2(.5, 1), new THREE.Vector2(0.25, 1)];
var b = [new THREE.Vector2(0, .333), new THREE.Vector2(.25, .333), new THREE.Vector2(.25, .666), new THREE.Vector2(0, .666)];
var c = [new THREE.Vector2(.25, .333), new THREE.Vector2(.5, .333), new THREE.Vector2(.5, .666), new THREE.Vector2(0.25, .666)];
var d = [new THREE.Vector2(.5, .333), new THREE.Vector2(.75, .333), new THREE.Vector2(.75, .666), new THREE.Vector2(.5, .666)];
var e = [new THREE.Vector2(.75, .333), new THREE.Vector2(1, .333), new THREE.Vector2(1, .666), new THREE.Vector2(.75, .666)];
var f = [new THREE.Vector2(.25, 0), new THREE.Vector2(.5, 0), new THREE.Vector2(.5, .333), new THREE.Vector2(.25, .333)];
geometry.faceVertexUvs[0] = [];
geometry.faceVertexUvs[0][0] = [a[0], a[1], a[3]];
geometry.faceVertexUvs[0][1] = [a[1], a[2], a[3]];
geometry.faceVertexUvs[0][2] = [f[0], f[1], f[3]];
geometry.faceVertexUvs[0][3] = [f[1], f[2], f[3]];
geometry.faceVertexUvs[0][4] = [b[0], b[1], b[3]];
geometry.faceVertexUvs[0][5] = [b[1], b[2], b[3]];
geometry.faceVertexUvs[0][6] = [d[0], d[1], d[3]];
geometry.faceVertexUvs[0][7] = [d[1], d[2], d[3]];
geometry.faceVertexUvs[0][8] = [c[0], c[1], c[3]];
geometry.faceVertexUvs[0][9] = [c[1], c[2], c[3]];
geometry.faceVertexUvs[0][10] = [e[0], e[1], e[3]];
geometry.faceVertexUvs[0][11] = [e[1], e[2], e[3]]
material = new THREE.MeshPhongMaterial({
alphaMap: THREE.ImageUtils.loadTexture(url + '/images/KS-cubemap-2.png'),
transparent: true,
opacity:.8,
//map: THREE.ImageUtils.loadTexture(url + '/images/KS-cubemap-2.png'),
ambient: 0xffffff,
color: 0xff0000,
specular: 0xffffff,
shininess:2,
blending: THREE.AdditiveAlpha,
shading: THREE.FlatShading,
doubleSided: true
})
var dim = 1;
var pos = 100
var ran = 1;
for (var x = 0; x < dim; x++) {
for (var y = 0; y < dim; y++) {
for (var z = 0; z < dim; z++) {
object = new THREE.Mesh(geometry, material);
object.position.x = x * pos - (dim * pos / 2) * ran;
object.position.y = y * pos - (dim * pos / 2) * ran;
object.position.z = z * pos - (dim * pos / 2) * ran;
object.castShadow = true;
object.receiveShadow = true;
scene.add(object);
objects.push(object);
}
}
}
loader.load( url + '/images/roller.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
mesh.position.x =0;
mesh.position.y =0;
mesh.position.z =0;
scene.add( mesh );
objects.push(mesh);
});
plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2000, 2000, 8, 8), new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.25,
transparent: true
}));
plane.visible = false;
scene.add(plane);
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
clearColor: 0xff0000, clearAlpha: 1
});
renderer.setSize(container.offsetWidth, container.offsetHeight);
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.sortObjects = false;
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
container.appendChild(renderer.domElement);
/*var info = document.createElement('div');
info.style.position = 'relative';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'three.js webgl - draggable cubes with geometic cubemap';
container.appendChild(info);
/*stats = new Stats();
stats.domElement.style.position = 'relative';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);*/
renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = container.offsetWidth / container.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.offsetWidth, container.offsetHeight);
}
function animate() {
requestAnimationFrame(animate);
for (var i = 0; i < objects.length; i++) {
objects[i].rotation.x += 0.01;
objects[i].rotation.y += 0.02;
objects[i].rotation.z += 0.001;
}
render();
//stats.update();
}
function render() {
controls.update();
renderer.render(scene, camera);
}
function onDocumentMouseMove(event) {
event.preventDefault();
var offsets = container.getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;
mouse.x = ((event.clientX - left) / container.offsetWidth) * 2 - 1;
mouse.y = -((event.clientY - top) / container.offsetHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (SELECTED) {
var intersects = raycaster.intersectObject(plane);
SELECTED.position.copy(intersects[0].point.sub(offset));
return;
}
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
plane.position.copy(INTERSECTED.position);
plane.lookAt(camera.position);
}
container.style.cursor = 'pointer';
} else {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
controls.enabled = false;
SELECTED = intersects[0].object;
var intersects = raycaster.intersectObject(plane);
offset.copy(intersects[0].point).sub(plane.position);
container.style.cursor = 'move';
}
}
function onDocumentMouseUp(event) {
event.preventDefault();
controls.enabled = true;
if (INTERSECTED) {
plane.position.copy(INTERSECTED.position);
SELECTED = null;
}
container.style.cursor = 'auto';
}
init();
animate();
}
});