three.js - Translating threejs animation from WebGL to Canvas -
i trying make threejs example (currently using webglrenderer) work canvasrenderer: http://threejs.org/examples/webgl_shadowmap.html
here result: http://scottrogowski.com/ralphe/horse2.html
i have went ahead , changed renderer webglrenderer canvasrenderer past don't know do. horses float across screen instead of running.
is there missing or running against inherent limit in threejs?
i guessing might have morphanimmesh since appears animation happening.
the javascript code (tried make fiddle, wouldn't render :( ):
var shadow_map_width = 2048, var shadow_map_height = 1024; var margin = 100; var screen_width = window.innerwidth; var screen_height = window.innerheight - 2 * margin; var floor = -250; var camera, controls, scene, renderer; var container, stats; var near = 5, far = 3000; var scenehud, cameraortho, hudmaterial; var morph, morphs = []; var light; var clock = new three.clock(); init(); animate(); function init() { container = document.createelement('div'); document.body.appendchild(container); // scene camera camera = new three.perspectivecamera(23, screen_width / screen_height, near, far); camera.position.set(700, 50, 1900); controls = new three.firstpersoncontrols(camera); controls.lookspeed = 0.0125; controls.movementspeed = 500; controls.nofly = false; controls.lookvertical = true; controls.constrainvertical = true; controls.verticalmin = 1.5; controls.verticalmax = 2.0; controls.lon = -110; // scene scene = new three.scene(); scene.fog = new three.fog(0x59472b, 1000, far); // lights var ambient = new three.ambientlight(0x444444); scene.add(ambient); light = new three.spotlight(0xffffff, 1, 0, math.pi, 1); light.position.set(0, 1500, 1000); light.target.position.set(0, 0, 0); light.castshadow = true; light.shadowcameranear = 700; light.shadowcamerafar = camera.far; light.shadowcamerafov = 50; //light.shadowcameravisible = true; light.shadowbias = 0.0001; light.shadowdarkness = 0.5; light.shadowmapwidth = shadow_map_width; light.shadowmapheight = shadow_map_height; scene.add(light); createhud(); createscene(); // renderer renderer = new three.canvasrenderer(); //webglrenderer( { clearcolor: 0x000000, clearalpha: 1, antialias: false } ); renderer.setsize(screen_width, screen_height); renderer.domelement.style.position = "relative"; renderer.domelement.style.top = margin + 'px'; container.appendchild(renderer.domelement); renderer.setclearcolor(scene.fog.color, 1); renderer.autoclear = false; // renderer.shadowmapenabled = true; renderer.shadowmaptype = three.pcfshadowmap; // stats stats = new stats(); stats.domelement.style.position = 'absolute'; stats.domelement.style.top = '0px'; stats.domelement.style.zindex = 100; //container.appendchild( stats.domelement ); // window.addeventlistener('resize', onwindowresize, false); } function onwindowresize() { screen_width = window.innerwidth; screen_height = window.innerheight - 2 * margin; camera.aspect = screen_width / screen_height; camera.updateprojectionmatrix(); renderer.setsize(screen_width, screen_height); controls.handleresize(); } function createhud() { cameraortho = new three.orthographiccamera(screen_width / -2, screen_width / 2, screen_height / 2, screen_height / -2, -10, 1000); cameraortho.position.z = 10; var shader = three.unpackdepthrgbashader; var uniforms = new three.uniformsutils.clone(shader.uniforms); hudmaterial = new three.shadermaterial({ vertexshader: shader.vertexshader, fragmentshader: shader.fragmentshader, uniforms: uniforms }); var hudgeo = new three.planegeometry(shadow_map_width / 2, shadow_map_height / 2); var hudmesh = new three.mesh(hudgeo, hudmaterial); hudmesh.position.x = (screen_width - shadow_map_width / 2) * -0.5; hudmesh.position.y = (screen_height - shadow_map_height / 2) * -0.5; hudmesh.rotation.x = math.pi / 2; scenehud = new three.scene(); scenehud.add(hudmesh); cameraortho.lookat(scenehud.position); } function createscene() { // ground var geometry = new three.planegeometry(100, 100); var planematerial = new three.meshphongmaterial({ color: 0xffdd99 }); planematerial.ambient = planematerial.color; var ground = new three.mesh(geometry, planematerial); ground.position.set(0, floor, 0); ground.rotation.x = -math.pi / 2; ground.scale.set(100, 100, 100); ground.castshadow = false; ground.receiveshadow = true; scene.add(ground); // text var textgeo = new three.textgeometry("three.js", { size: 200, height: 50, curvesegments: 12, font: "helvetiker", weight: "bold", style: "normal", bevelthickness: 2, bevelsize: 5, bevelenabled: true }); textgeo.computeboundingbox(); var centeroffset = -0.5 * (textgeo.boundingbox.max.x - textgeo.boundingbox.min.x); var textmaterial = new three.meshphongmaterial({ color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 }); var mesh = new three.mesh(textgeo, textmaterial); mesh.position.x = centeroffset; mesh.position.y = floor + 67; mesh.castshadow = true; mesh.receiveshadow = true; scene.add(mesh); // cubes var mesh = new three.mesh(new three.cubegeometry(1500, 220, 150), planematerial); mesh.position.y = floor - 50; mesh.position.z = 20; mesh.castshadow = true; mesh.receiveshadow = true; scene.add(mesh); var mesh = new three.mesh(new three.cubegeometry(1600, 170, 250), planematerial); mesh.position.y = floor - 50; mesh.position.z = 20; mesh.castshadow = true; mesh.receiveshadow = true; scene.add(mesh); // morphs function addmorph(geometry, speed, duration, x, y, z, fudgecolor) { var material = new three.meshlambertmaterial({ color: 0xffaa55, morphtargets: true, vertexcolors: three.facecolors }); if (fudgecolor) { material.color.offsethsl(0, math.random() * 0.5 - 0.25, math.random() * 0.5 - 0.25); material.ambient = material.color; } var meshanim = new three.morphanimmesh(geometry, material); meshanim.speed = speed; meshanim.duration = duration; meshanim.time = 600 * math.random(); meshanim.position.set(x, y, z); meshanim.rotation.y = math.pi / 2; meshanim.castshadow = true; meshanim.receiveshadow = true; scene.add(meshanim); morphs.push(meshanim); } function morphcolorstofacecolors(geometry) { if (geometry.morphcolors && geometry.morphcolors.length) { var colormap = geometry.morphcolors[0]; (var = 0; < colormap.colors.length; i++) { geometry.faces[i].color = colormap.colors[i]; } } } var loader = new three.jsonloader(); loader.load("horse.js", function (geometry) { morphcolorstofacecolors(geometry); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, 300, true); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, 450, true); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, 600, true); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, -300, true); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, -450, true); addmorph(geometry, 550, 1000, 100 - math.random() * 1000, floor, -600, true); }); } // function animate() { requestanimationframe(animate); render(); stats.update(); } function render() { var delta = clock.getdelta(); (var = 0; < morphs.length; i++) { morph = morphs[i]; morph.updateanimation(1000 * delta); morph.position.x += morph.speed * delta; if (morph.position.x > 2000) { morph.position.x = -1000 - math.random() * 500; } } controls.update(delta); renderer.clear(); renderer.render(scene, camera); }
Comments
Post a Comment