2012-02-23 2 views
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(); 

는 이미지 형상을 통해 텍스처를 렌더링 중지합니다. 아무도 왜 그런 말을 할 수 있습니까?

답변

2

THREE.SVGRenderer는 텍스처를 지원하지 않습니다.

+0

이론적으로 가능한지 궁금합니다. 나는 SVG에 대해 많이 알지 못하지만, 이미지를 지원하고, 브라우저에서 이것들은'data :'URIs 일 수도있다. 나는 그들이 변이 될 수 있는지 잘 모르겠다. –

+0

수동 또는 사용자 정의 렌더러로 수행 할 수있는 하나의 아이디어 : 캔버스/OGL과 SVG 렌더러를 모두 사용하십시오. SVG 도형을 사용하여 래스터 이미지를 각 SVG 도형의 이미지로 "잘라내어"다음 데이터와 함께 다른 svg 그룹에 포함시킵니다 : URL. –

관련 문제