Three.js 快速入门教程 02 - 与 Vue React 集成

在实际开发中，通常还是会基于前端框架去搭建项目，因此需要将 Three.js 与前端框架结合起来使用。

好在 Three.js 是一个比较独立的功能，与外界 dom 交互较少，因此结合起来也是比较方便容易的，其核心思路就是通过前端框架标记出挂载容器的 dom 节点，再传递给 Three.js 的渲染器用于挂载渲染输出画面。

与 Vue 项目集成

使用 npm 安装 Three.js 依赖

npm i three

在 vue 组件文件中可以通过下面代码引入 Three.js

<script setup>
import * as THREE from "three";
</script>

<template>
  <div />
</template>

接下来通过ref对容器进行标记

<script setup>
import * as THREE from "three";
import { ref } from "vue";

const container = ref();
</script>

<template>
  <div ref="container" />
</template>

由于需要等待 dom 的挂载完成，才能获取到容器节点，因此需要将 Three.js 初始化的代码写在onMounted生命周期钩子中

<script>
import * as THREE from "three";
import { onMounted, ref } from "vue";

export default {
  setup() {
    const container = ref();

    onMounted(() => {
      const width = 800;
      const height = 800;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      // 将渲染器的输出画面挂载到指定的容器
      container.value.appendChild(renderer.domElement);

      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }

      render();
    });

    return {
      container,
    };
  },
};
</script>

<template>
  <div ref="container" />
</template>

如果使用 setup 语法，可将代码修改为

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";

const container = ref();

onMounted(() => {
  const width = 800;
  const height = 800;
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  // 将渲染器的输出画面挂载到指定的容器
  container.value.appendChild(renderer.domElement);

  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }

  render();
});
</script>

<template>
  <div ref="container" />
</template>

如果使用的是组合式 API，可将代码修改为

<script>
import * as THREE from "three";

export default {
  mounted() {
    const width = 800;
    const height = 800;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    // 将渲染器的输出画面挂载到指定的容器
    this.$refs.container.appendChild(renderer.domElement);

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }

    render();
  },
};
</script>

<template>
  <div ref="container" />
</template>

与 React 项目集成

使用 npm 安装 Three.js 依赖

npm i three

引入 Three.js 并标记容器

import * as THREE from "three";
import { useRef } from "react";

function Demo() {
  const container = useRef();

  return <div ref={container} />;
}

接下来将渲染器的输出画面挂载到指定的容器

import * as THREE from "three";
import { useRef, useEffect } from "react";

function Demo() {
  const container = useRef();

  useEffect(() => {
    const width = 800;
    const height = 800;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    // 将渲染器的输出画面挂载到指定的容器
    container.current.appendChild(renderer.domElement);

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }

    render();
  }, []);

  return <div ref={container} />;
}