1
에 표시되지 : three.js를 텍스처 우리는 다음 코드를 시도했습니다 SVGRenderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.0001, 999);
camera.position.set(0, 0, 3);
scene.add(camera);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
var image = $('#tmp')[0]
var texture = new THREE.Texture(image);
texture.needsUpdate = true;
var img_material = new THREE.MeshBasicMaterial({color: 0x000000, map: texture });
var plane_geometry = new THREE.PlaneGeometry(2, 2);
var imageMesh = new THREE.Mesh(plane_geometry, img_material);
imageMesh.doubleSided = true;
scene.add(imageMesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
$('#container').append(renderer.domElement);
renderer.render(scene, camera);
을하지만, 우리가로 전환 할 때 :
renderer = new THREE.SVGRenderer();
는 이미지 형상을 통해 텍스처를 렌더링 중지합니다. 아무도 왜 그런 말을 할 수 있습니까?
이론적으로 가능한지 궁금합니다. 나는 SVG에 대해 많이 알지 못하지만, 이미지를 지원하고, 브라우저에서 이것들은'data :'URIs 일 수도있다. 나는 그들이 변이 될 수 있는지 잘 모르겠다. –
수동 또는 사용자 정의 렌더러로 수행 할 수있는 하나의 아이디어 : 캔버스/OGL과 SVG 렌더러를 모두 사용하십시오. SVG 도형을 사용하여 래스터 이미지를 각 SVG 도형의 이미지로 "잘라내어"다음 데이터와 함께 다른 svg 그룹에 포함시킵니다 : URL. –