friedhelm

Tulpe

maike

16×16 kreis

16×16 Quadrat

Bertha 01 Quadrat, Spass mit d3

Bertha 03 kreis, Spass mit d3.js

Bertha 02

Bertha 01

Juttah

Juttah

panorama 2

panorama

svg map

map terrain-labels neu

map map box

map toner

map watercolor

wir 03

wir 02

wir 01

04 d3 Kreis mit Klick auf die SVG-Fläche bringen und in die mitte bewegen

03 d3 Kreis mit Klick auf die SVG-Fläche bringen

02 d3 einen Kreis auf die SVG-Fläche

01 d3 SVG Element erzeugen und formatieren

Paralax blur small

Paralax blur big

Paralax blur middle

3D

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() { 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.0; 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(0x333333); scene.add(ambientLight); var light = new THREE.SpotLight(0xffffff, 1.5); 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(50, 50, 50); 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('../wp-content/themes/maschuthi_bootstrap/images/KS-cubemap-1.png'), transparent: false, map: THREE.ImageUtils.loadTexture('../wp-content/themes/maschuthi_bootstrap/images/KS-cubemap-1.png'), ambient: 0xffff00, color: 0xffffff, specular: 0xffffff, shininess: 10, shading: THREE.FlatShading }) var dim = 2; 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); } } } var loader = new THREE.JSONLoader(); var url = wp_custom.template_url; 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 }); renderer.setSize(container.offsetWidth, container.offsetHeight); renderer.setClearColor(0xf0f0f0); 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(); } });