如何使用一些圖片，以形成three.js所

Question

我想用three.js所產生一個像一些圖片構成的形狀（也許有些字）圖形：

我想我要做的是獲得一些形成一個形狀的點，然後把圖片放到這些點上。我搜索了一些信息，但我仍然不知道如何獲得這些點，因爲形狀可能不規則。有沒有解決方法？

Answer 1

的方式我看到它，你有兩種方法來這裏着手：

1. 您可以使用建模軟件，如攪拌機首先生成與圖片一起的形狀，然後導出JSON（參見 this關於如何在blender中設置threejs json導出器），然後使用JSON加載器來加載該JSON。
2. 另一種方式是，您可以使用三角形提供的像盒子，圓形等（請參考docs）創建簡單的幾何形狀，然後爲其添加紋理，如here所示。

---

希望這些解決方案之一是，你在找什麼。

Answer 2

我會用畫布來繪製每張照片的三維位置。

我創建了一個小提琴這裏的文字：

https://jsfiddle.net/2qu6m4h3/

和一個隨機的形狀：

https://jsfiddle.net/d2th9ekb/

它創建了一個canvas元素繪製文本。它詢問畫布上的像素位置。然後這些位置被髮送到一個函數，該函數將立方體放置在3d中。而不是放置多維數據集，您可以放置​​顯示每張照片的精靈對象。使用比例屬性可爲您提供更多空間。

下面的代碼：

/* 
Start Setup text canvas and tools 
*/ 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.canvas.width = 400; 
ctx.canvas.height = 200; 
function createTextSourceCanvas(text,src) { 
    src.font = '50pt Times'; 
    src.fillStyle = '#00ff00'; 
    src.fillRect(0, 0, canvas.width, canvas.height); 
    src.fillStyle = '#FFFFFF'; 
    src.textAlign = "center"; 
    src.textBaseline = "middle"; 
    src.fillText(text, canvas.width /2, canvas.height /2); 
} 
function examineText(src, fi){ 
    var positiveResults = []; 
    var width = src.canvas.width; 
    var height = src.canvas.height; 
    var imgData = src.getImageData(0, 0,width, height); 
    for(var x = 0; x < width; x+=fi){ 
    for(var y = 0; y < height; y+=fi ){ 
    var pixel = getPixelXY(imgData, x, y) 
    if(pixel[0] == 0 && pixel[1] == 255 && pixel[2] == 0){ 
     continue; 
    } 
    positiveResults.push([x,y]); 
    } 
    } 
    return positiveResults; 
} 
function getPixel(imgData, index) { 
    var i = index*4, d = imgData.data; 
    return [d[i],d[i+1],d[i+2],d[i+3]] 
} 
function getPixelXY(imgData, x, y) { 
    return getPixel(imgData, y*imgData.width+x); 
} 
/* 
End Setup text canvas and tools 
*/ 

/* 
Start Setup Threejs canvas and tools 
*/ 
var scene; 
var renderer; 
var camera; 
var cube; 
var controls; 
function init3d(){ 
    renderer = new THREE.WebGLRenderer({antialias:true}); 
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    renderer.setSize (width, height); 
    document.body.appendChild (renderer.domElement); 
    scene = new THREE.Scene() 
    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000); 
    camera.position.y = 160; 
    camera.position.z = 400; 
    camera.lookAt (new THREE.Vector3(0,0,0)); 
    controls = new THREE.OrbitControls (camera, renderer.domElement); 
    var gridXZ = new THREE.GridHelper(100, 10); 
    scene.add(gridXZ); 
    var pointLight = new THREE.PointLight (0xffffff); 
    pointLight.position.set (0,300,200); 
    scene.add (pointLight); 
    window.addEventListener ('resize', onWindowResize, false); 
} 
function onWindowResize(){ 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize (window.innerWidth, window.innerHeight); 
} 
function animate(){ 
    controls.update(); 
    requestAnimationFrame (animate); 
    renderer.render (scene, camera); 
} 
/* 
End Setup Threejs canvas and tools 
*/ 

/* 
Start create 3d from text examination 
*/ 
function create3dProjectionText(scene, positions, wExtent, hExtent, scale){ 
    if(scale == undefined){ 
     scale = 1; 
    } 
    var group = new THREE.Object3D(); 

    var cubeGeometry = new THREE.BoxGeometry (2,2,2); 
    var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0xFFFFFF}); 

    for(var i in positions){ 
     cube = new THREE.Mesh (cubeGeometry, cubeMaterial); 
     cube.position.set (positions[i][0]*scale - (wExtent*scale/2), positions[i][1]*scale -(hExtent*scale/2), 0); 
     group.add (cube); 
    } 
    group.rotateX(-Math.PI ); 
    scene.add(group); 
} 
/* 
End create 3d from text examination 
*/ 
//initialize the 3d space 
init3d(); 
//initialize the text canvas 
createTextSourceCanvas("Hello World", ctx); 
// 
create3dProjectionText(scene, examineText(ctx ,4), ctx.canvas.width, ctx.canvas.height, 1.5); 
animate();