Uczę się gry three.js, próbując eksperymentować z przekształcaniem obrazów.Utwórz efekt dopasowania obrazu w WebGL i three.js
bardzo podoba mi się efekt pokazany here.
Jakie kroki chciałbym wykonać, aby być w stanie przekształcić Podobne do tego?
Do tej pory mam:
// instantiate a loader
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'clouds.jpg',
// Function when resource is loaded
function (texture) {
init(new THREE.MeshBasicMaterial({
map: texture
}));
},
// Function called when download progresses
function (xhr) {
console.log((xhr.loaded/xhr.total * 100) + '% loaded');
},
// Function called when download errors
function (xhr) {
console.log('An error happened');
}
);
var init = function(material) {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var rectLength = window.innerHeight;
var rectWidth = window.innerWidth;
var rectShape = new THREE.Shape();
rectShape.moveTo(0,0);
rectShape.lineTo(0, rectWidth);
rectShape.lineTo(rectLength, rectWidth);
rectShape.lineTo(rectLength, 0);
rectShape.lineTo(0, 0);
var geometry = new THREE.ShapeGeometry(rectShape);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 1;
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
}
co czyni mój obraz jako płaski kształt 2D ale utknąłem w jaki sposób można następnie zastosować efekty do obrazu. Zgadywanie tego musi się zdarzyć wewnątrz render
, ale nie wiesz, jak to zrobić.
A może lepiej zrobię to w zwykłym WebGL?
Wszelkie porady/porady/samouczki są doceniane!
używasz [THREE.MeshBasicMaterial] (http://threejs.org/docs/index.html?q=mater#Reference/Materials/MeshBasicMaterial). Zajrzyj do [THREE.ShaderMaterial] (http://threejs.org/docs/index.html?q=mater#Reference/Materials/ShaderMaterial). Taki efekt owijania mógłby zostać dokonany poprzez modyfikację współrzędnych uv w twoich shaderów (aby uczynić go responsywnym mogłeś przekazać bieżący koordynator myszy/czas jako jednolity) – mlkn