Threejs学习之旅一

配置开发环境
因为我这边是用的Vue作为前端基础框架所以我们先安装Vue
Vue Install :

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Create a project:

vue create my-project
# OR
vue ui

安装Threejs

yarn add three
# OR
yarn add three

引入使用

<script>
import * as THREE from "three";
let camera, scene, renderer;
let geometry, material, mesh;
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      //场景（scene）、相机（camera）和渲染器（renderer）
      camera = new THREE.PerspectiveCamera(
        70,
        window.innerWidth / window.innerHeight,
        0.01,
        10
      ); // 创建透视相机
      camera.position.z = 1;

      scene = new THREE.Scene(); // 创建场景

      geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      material = new THREE.MeshNormalMaterial();

      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器
      renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
      document.body.appendChild(renderer.domElement);
    },
    animate() {
      requestAnimationFrame(this.animate); //渲染循环
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      renderer.render(scene, camera); // 渲染render( scene, camera, renderTarget, forceClear ) scene：前面定义的场景 camera：前面定义的相机renderTarget：渲染的目标，默认是渲染到前面定义的render变量中forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除
    },
  },
};
</script>

运行看到如下效果,说明配置成功

image.png