three.js+next.js+gsap示例(1)

通过本示例，你可以快速搭建一个结合three.js(react-three-fiber)和gsap的用于3d模型展示的next.js项目。

介绍

什么是next.js

next.js这么有名就不介绍了。

什么是three.js

three.js也挺有名的就简单介绍一下，它是一个3d库，可以渲染3d模型、场景、动画......

不过这次我用到的其实是react-three-fiber这个库，可以理解成是three.js的react版本，不了解的同学可以先看看这个React-Three-Fiber 中文文档。

什么是gsap

“Animate anything”，gsap是一个非常强大的动画库，可能react生态有Frame Motion，但是我的助手ds告诉我，gsap要更加强大。

当然，之所以用gsap最主要的原因还是因为它免费了。是的，它之前有些功能是收费的，而且价格不便宜。

前期准备

需要先下载一个3d模型，可以在这里下载，Fab。

我使用的是这个[有点破旧的小机器人](Robot | Fab)，下载gltf格式。

创建项目

先创建一个next.js项目。

npx create-next-app@latest

选项就完全按照我图片里面的来就行。

引入react-three-fiber

npm install three @react-three/fiber

在 next.config.js文件中设置 transpilePackage 属性：

transpilePackages: ['three'],

创建场景

修改page.js，移除掉没用的代码，引入Canvas组件，创建一个空场景，建议直接复制下面代码。

'use client'

import { Canvas } from '@react-three/fiber'

export default function Home() {

  return (
    <div className='h-screen w-screen'>
      <Canvas/>
    </div>
  );
}

如果没有意外，你运行npm run dev之后应该看到一片黑。

加载模型

把我们下载好的模型解压之后放到public目录里面，目录结构如下。

引入useLoader和GLTFLoader来加载模型

'use client'
import { Canvas } from '@react-three/fiber'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

function Model(props) {
  const gltf = useLoader(GLTFLoader, 'models/robot_gltf/scene.gltf')
  return <primitive object={gltf.scene} />
}

export default function Home() {
  return (
    <div className='h-screen w-screen'>
      <Canvas>
        <Model />
      </Canvas>
    </div>
  );
}

不出意外的话，你应该能模糊看到你的模型了，屏幕中间应该有一团黑色的，那是因为我们还没有添加灯光。

添加灯光

添加环境光ambientLight和定向光directionalLight，不需要引入，直接添加。

'use client'

import { Canvas } from '@react-three/fiber'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

function Model(props) {
  const gltf = useLoader(GLTFLoader, 'models/robot_gltf/scene.gltf')
  return <primitive object={gltf.scene} />
}

export default function Home() {
  return (
    <div className='h-screen w-screen'>
      <Canvas>
        <Model />
        <ambientLight intensity={0.5} />
        <directionalLight
          position={[5, 5, 5]}
          intensity={1}
          castShadow
          shadow-mapSize-width={1024}
          shadow-mapSize-height={1024}
        />
      </Canvas>
    </div>
  );
}

现在你应该可以看到你的模型了。

添加轨道控制器

为了更好的查看模型，我们需要引入OrbitControls。 首先，安装react-three/drei，react-three/drei是一个配套使用的工具库，里面有很多有用的工具。

npm i @react-three/drei

修改代码

'use client'

import { Canvas } from '@react-three/fiber'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls} from "@react-three/drei";

function Model(props) {
  const gltf = useLoader(GLTFLoader, 'models/robot_gltf/scene.gltf')
  return <primitive object={gltf.scene} />
}

export default function Home() {

  return (
    <div className='h-screen w-screen'>
      <Canvas>
        <Model />
        <OrbitControls/>
        <ambientLight intensity={0.5} />
        <directionalLight
          position={[5, 5, 5]}
          intensity={1}
          castShadow
          shadow-mapSize-width={1024}
          shadow-mapSize-height={1024}
        />
      </Canvas>
    </div>
  );
}

现在你就应该可以通过鼠标和键盘对你的模型进行旋转、移动和缩放了。