“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

background

Last year saw a resurgence of interest in WebGL for two main reasons:

  • One is the great fire of the concept of the meta-universe;
  • The second is to use the Web for games and 3D animated Settings, such as the sci-fi scenes in gamer movies or hayao Miyazaki’s anime, which are so cool.

technology

  • vue3.0
  • typescript
  • threejs

implementation

Create a project

Ue-cli can be used to quickly create a project. I have created it locally as follows:

The introduction of threejs

Since we use typescript, we introduce @types/three

The @types/three documentation is there

NPM: www.npmjs.com/package/@ty…

Making: github.com/DefinitelyT…

Install threejs

npm install –save @types/three

The installed effect is as follows

Application threejs

Introduce three into the project we are going to use

import * as THREE from “three”;

After the introduction we found an error, the solution is as follows: add shims-vue.d.ts file

declare module “@types/three”;

Write a demo

  1. Add a route to router/index.ts with the following code:
{
    path: "/demo01".name: "Demo01".component: () = > import("@/views/Demo01/Demo01.vue"),}Copy the code

2. Add a directory in the views as follows:

  1. Demo01. Vue code:
<template>
  <div class="demo"></div>
</template>

<script lang="ts">
import ThreeJs from "./index";
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "Demo01".props: {},
  setup() {
    onMounted(() = > {
      newThreeJs(); }); }});</script>
<style scoped lang="scss"></style>
Copy the code
  1. Index. ts code, as follows:
import * as THREE from "three";

export default class ThreeJs {
  scene: THREE.Scene | null = null;
  camera: THREE.PerspectiveCamera | null = null;
  renderer: THREE.WebGLRenderer | null = null;
  ambientLight: THREE.AmbientLight | null = null;
  mesh: THREE.Mesh | null = null;

  constructor() {
    this.init();
  }

  init(): void {
    // Create a new scene
    this.scene = new THREE.Scene();
    this.setCamera();
    this.setRenderer();
    this.setCube();
    this.animate();
  }

  // Create a perspective camera
  setCamera(): void {
    // The second argument is the length to width ratio. The default is the internal width and height of the window returned by the browser in pixels
    this.camera = new THREE.PerspectiveCamera(
      75.window.innerWidth / window.innerHeight,
      0.1.1000
    );
    this.camera.position.z = 5;
  }

  // Set the renderer
  setRenderer(): void {
    this.renderer = new THREE.WebGLRenderer();
    // Set the canvas size
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    // This is actually canvas renderer.domElement
    document.body.appendChild(this.renderer.domElement);
  }

  // Set the ambient light
  setLight(): void {
    if (this.scene) {
      this.ambientLight = new THREE.AmbientLight(0xffffff); / / the ambient light
      this.scene.add(this.ambientLight); }}// Create a grid model
  setCube(): void {
    if (this.scene) {
      const geometry = new THREE.BoxGeometry(); // Create a cube Geometry object Geometry
      // const material = new THREE.MeshBasicMaterial({ color: 0xff3200 }); // The Material object is Material
      const texture = new THREE.TextureLoader().load(
        "/assets/imgs/dalishi.jpg"
      ); // Get the texture first
      const material = new THREE.MeshBasicMaterial({ map: texture }); // Then create a phong material to handle the shading and pass it to the texture map
      this.mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      this.scene.add(this.mesh); // Add the grid model to the scene
      this.render(); }}/ / rendering
  render(): void {
    if (this.renderer && this.scene && this.camera) {
      this.renderer.render(this.scene, this.camera); }}/ / animation
  animate(): void {
    if (this.mesh) {
      requestAnimationFrame(this.animate.bind(this));
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.01;
      this.render(); }}}Copy the code
  1. See the effect:

The articles

  • The front end of “Xi ‘an Jiayou” simply realizes 2.5D Big Wild Goose Pagoda

  • Implement the firecracker timer with SVG

  • Front-end collection, commonly used online picture site

  • Simple fireworks implementation with Animejs