Question

我想使用 three.js 来生成一个由某些图片组成的形状（可能是某个单词）：

我认为我要做的就是得到一些形成一个形状的点，然后将图片放到这些点上。我搜索了一些信息，但我仍然不知道如何得到这些点，因为形状可能不规则。有没有解决方案？

Answer 1

我看到它的方式，你有两种方法可以在这里继续：

您可以使用像Blender这样的建模软件首先生成形状以及图片，然后导出JSON（请参阅 this了解如何在blender中设置threejs json导出器）然后使用JSON加载器加载那个JSON。
另一种方法是使用threejs提供的方式创建简单的几何形状，如box，circle等（参考docs），然后如图所示here添加纹理。< / LI>
希望其中一个解决方案是您正在寻找的。

Answer 2

我会用画布绘制每张照片的三维位置。

我在这里用文字创建了一个小提琴：

https://jsfiddle.net/2qu6m4h3/

随机形状：

https://jsfiddle.net/d2th9ekb/

它创建一个画布元素来绘制文本。它询问画布的像素位置。然后将这些位置发送到将立方体放置在3d中的函数。您可以放置显示每张照片的精灵对象，而不是放置多维数据集。使用scale属性可以在不同位置之间留出更多空间。

以下是代码：

/*
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();

如何使用一些图片在three.js中形成图形

2 个答案: