Vue/React页面引入three.js实现3d动画场景

最新推荐文章于 2024-08-29 17:43:39 发布

锐视创想

最新推荐文章于 2024-08-29 17:43:39 发布

阅读量1.7k

点赞数 1

分类专栏： Javascript React vue 文章标签： vue react js javascript three.js

本文链接：https://blog.csdn.net/mehnr/article/details/107400041

版权

本文介绍了如何在Vue和React项目中引入three.js库，通过安装和配置相关依赖，创建3D动画场景。在Vue中，作者提供了一个简单的测试代码示例，确保three.js正确引入并能运行。同样的过程也适用于React，为开发者在前端框架中实现3D效果提供了指南。

摘要由CSDN通过智能技术生成

页面引入three.js实现3d动画场景

研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js是一款运行在浏览器中的 3D 引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。

所需依赖

我们开始引入three.js相关插件。

npm install three

2.接下来利用npm安装轨道控件插件：

npm install three-orbit-controls

3.接下来安装加载.obj和.mtl文件的插件：

npm i --save three-obj-mtl-loader

4.安装渲染器插件：

npm i --save three-css2drender

5、安装好以后，在页面中引入three.js并使用，在所调用页面引入的代码为：

import * as Three from ‘three’

vue中安装Three.js

主要插件都已经安装完成了，接下来可以实现一个demo，测试three.js是否引入成功。页面测试代码如下：

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

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

export default {
   
  name: "ThreeView",
  data() {
   
    return {
   
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    };
  },
  methods: {
   
    init: function() {
   
      let container = document.getElementById("container");
      this.camera = new Three.PerspectiveCamera(
        70,
        container.clientWidth / container.clientHeight,
        0.01,
        10
      );
      this.camera.position.z = 0.6;
      this.scene = new Three.Scene();
      let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
      let material = new