制作一根3D巧克力雪糕，并用react展示

一、背景介绍

近日，笔者发现一个好软件，可迅速做voxel建模，即像素3D。

软件下载地址：ephtracy.github.io/

下图，是笔者用MagicaVoxel制作的雪糕。

这是渲染后的样子：

笔者还做了一个小的游戏场景：

但是，它如何与前端结合呢？

原来，它可以导出obj格式。

导出obj格式后，会发现还有扩展名分别为mtl与png的同名文件。这两个都有用，没有它们，模型就无法呈现出材质。有了模型，只需要找到一个能显示模型的组件即可，好在github上面有很多。

二、具体步骤

1、创建一个react应用

npx create-react-app voxeldemo
cd voxeldemo
npm run start

2、安装3d显示组件

npm i react-3d-viewer --save

3、核心代码

import {MTLModel} from 'react-3d-viewer';

<MTLModel
    width={size.w}
    height={size.h}
    scale={{x:0.2,y:0.2,z:0.2}}
    position={{x:0.2,y:-0.3,z:0}}
    rotation={{x:0,y:0,z:0}}
    texPath="/"
    mtl="/demo.mtl"
    src="/demo.obj"
/>

4、全部代码

import React,{useEffect,useState} from 'react';
import './App.css';
import {MTLModel} from 'react-3d-viewer';
function App() {
  const [size,setSize]=useState({
    w:window.innerWidth*.9,
    h:window.innerHeight*.9
  });
  useState(()=>{
    window.addEventListener("resize",()=>{
      setSize({
        w:window.innerWidth*.9,
        h:window.innerHeight*.9
      });
    });
  },[]);
  return (
    <div className="App">
      <MTLModel
        width={size.w}
        height={size.h}
        scale={{x:0.2,y:0.2,z:0.2}}
        position={{x:0.2,y:-0.3,z:0}}
        rotation={{x:0,y:0,z:0}}
        texPath="/"
        mtl="/demo.mtl"
        src="/demo.obj"
      />
    </div>
  );
}
export default App;

三、效果

效果不够理想，可能是没有加光线的缘故。