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

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

所需依赖

1. 我们开始引入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 Three.MeshNormalMaterial();
      this.mesh = new Three.Mesh(geometry, material);
      this.scene.add(this.mesh);


      this.renderer = new Three.WebGLRenderer({ antialias: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
 
    },
    animate: function() {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};
</script>
<style scoped>
#container {
  height: 400px;
}
</style>

React中的创建Three.js

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

import React from 'react';
import * as Three from "three";
import './App.css';


export default class App extends React.Component {

  camera = null
  scene = null
  renderer = null
  mesh = null


  render() {
    return (
      <div>

        <div id="container" style={{height:"600px"}}></div>
      </div>

    )
  }


  init = () => {
    //#region 初始化相机，场景相关
    let container = document.getElementById("container");
    this.scene = new Three.Scene();

    this.camera = new Three.PerspectiveCamera(
      45,
      container.clientWidth / container.clientHeight,
      0.01,
      1000
    );
    this.renderer = new Three.WebGLRenderer({ antialias: true });
    //#endregion

    this.renderer.setClearColor(new Three.Color(0x000000));
    this.renderer.setSize(container.clientWidth, container.clientHeight);

    let axes = new Three.AxesHelper(20);
    this.scene.add(axes);
    const planeGeometry = new Three.PlaneGeometry(60, 20);
    const planMaterial = new Three.MeshBasicMaterial({
      color: 0x000000
    });
    let plan = new Three.Mesh(planeGeometry, planMaterial);
    plan.rotation.x = -0.5 * Math.PI;
    plan.position.set(15, 0, 0);
    this.scene.add(plan);

    //#region 增加一个cube 相机
    const cubeGeometry = new Three.BoxGeometry(4, 4, 4);
    let cubeMaterial = new Three.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true
    });

    let cube = new Three.Mesh(cubeGeometry, cubeMaterial);
    cube.position.set(-4, 3, 0);
    this.scene.add(cube);
    //#endregion

    //#region  add  a sphere  增加一个几何体
    let sphereGeometry = new Three.SphereGeometry(4, 20, 20);
    let sphereMaterial = new Three.MeshBasicMaterial({
      color: 0x777ff,
      wireframe: true
    });
    let sphere = new Three.Mesh(sphereGeometry, sphereMaterial);
    // position the sphere
    sphere.position.set(20, 4, 2);
    //add the sphere to the scene
    this.scene.add(sphere);
    // position and point the camera to the center of the scene
    this.camera.position.set(-30, 40, 30);
    this.camera.lookAt(this.scene.position);
    //#endregion

    // this.camera.position.z = 0.6;
    // let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
    // let material = new Three.MeshNormalMaterial();
    // this.mesh = new Three.Mesh(geometry, material);
    // this.scene.add(this.mesh);

    container.appendChild(this.renderer.domElement);
  }
  animate = () => {
    requestAnimationFrame(this.animate);
    // this.mesh.rotation.x += 0.01;
    // this.mesh.rotation.y += 0.02;
    this.renderer.render(this.scene, this.camera);
  }



  componentDidMount() {
    this.init();
    this.animate();
  }
}