ThreeJs制作模型图片

原创

已于 2024-11-22 11:13:39 修改 · 787 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ThreeJs

于 2024-03-13 17:26:30 首次发布

这个标题名字可能有歧义，只是不知道如何更好的表达，总之就是将图片的像素转换成3D场景的模型，并设置这个模型的颜色，放到像素点对应的位置从而拼接成一个图片，起因是上文中用js分解了音乐，实现了模型跳动效果，既然音频可以分解，那图片应该也可以，所以就有个这篇博客。

大概得实现逻辑是这样的，先找一个图片，像素要小，越小越好，要有花纹，然后用canvas将图片的每个像素拆解出来，拆解后可以获得这个图片每个像素的位置，颜色，用集合保存每个像素的信息，在3D场景中循环，有了位置和颜色后，在循环中创建一个个正方体，将正方体的位置设置为像素的位置，y轴方向为1，创建贴图，并将贴图的颜色改为像素点的颜色，全部循环后就得到一副用正方体拼接出来的图片了。但是如果你的图片分辨率高，那么拆解出来的像素点很多，就需要筛选掉一些，否则浏览器会卡死，所以强调用分辨率低的图片。

这里先找一副图片：

下面开始代码：

首先创建场景，相机，灯光，渲染器等：

 initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(200,400,200);
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(300,300,600)
      scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      scene.add(directionalLight2);
    },
initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#AAAAAA', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2