preface

In VUe3, threejs is used to draw the simplest geometry, automatic rotation of the cube, cylinder, sphere, and add light, the shadow part of the geometry, that is, the light does not shine on the place, the results are as follows, interested can see the specific implementation process ~

threejsThe paper

  • Three.jsIs a 3D engine running in a native WebGL package
  • Program Structure -> Scene – Camera – Renderer

  1. Scene Scene

    A scene is a container for holding geometry

  2. The Camera Camera

    The camera is a tool used for shooting. By controlling the position and direction of the camera, images can be obtained from different angles.

  3. The Renderer the Renderer

    The renderer uses the scene and camera to render. The rendering process is similar to that of a photographer taking an image. If you render it once, you get a static image. RequestAnimationFrame can be used in JS for efficient continuous rendering.

[Note] It involves geometry, material and other detailsAPIDid not do very specific description, need to consult by oneselfCylinderGeometry — three.js中文 documentation (webgl3d.cn)

Dependent package version

"vite": "^ 2.8.0"."three": "^ 0.138.0"."vue": "^ 3.2.25"
Copy the code

Vue3 DOM operation

– Threejs is the encapsulation of WebGL at the bottom, and finally uses Canvas to do graphics rendering, so the first step is to operate DOM

  • As follows,steupFunction.refDefine a reactive constantdomAfter exposure totemplateThe use,refMount to a specific element
  • ininitThreeDo specific drawing work
<template>
  <div>
    demo
  </div>
  <div class="demo-main" ref="dom"></div>
</template>
 <script lang="ts">
  import { defineComponent, onMounted, ref } from "vue";
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  export default defineComponent({
    setup() {
      const dom = ref<HTMLElement | null> (null);

      onMounted(() = > {
        initThree(dom.value);
      });

      function initThree(instance: HTMLElement | null) {
           //dosomething
      }

      return{ dom }; }});</script>
<style scoped>
  .demo-main {
    height:500px;
    padding: 9px 14px;
    margin-bottom: 14px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
  }
</style>
Copy the code

Create scenes, cameras, renderers in this section and beyondinitThreeMethods in writing

  • Here’s what we createdthreejsSomething very basic
        var hetght = instance.clientHeight - 25;
        var width = instance.clientWidth - 25;

        // Create the Scene object
        var scene = new THREE.Scene();

        // Create the camera object
        var camera = new THREE.PerspectiveCamera(75.1.0.1.1000);

        // Create the renderer object
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, hetght);

        instance.append(renderer.domElement);
        renderer.render(scene, camera);
        camera.position.z = 5;
        renderer.setClearColor(0xeeeeee.1.0);
Copy the code

The cube

       // Cube mesh model
        var cubeGeometry = new THREE.BoxGeometry(1.1.1);
        // The Material object is Material
        // Textures determine how surfaces are drawn in geometry. If the geometry is the skeleton that defines the shape, then the material is the skin. There are many different kinds of materials in Three.js, and they have different properties like reflection, texture mapping, and adjusting transparency.
        var cubeMaterial = new THREE.MeshLambertMaterial({
          color: 0xff0000.opacity: 0.7.transparent: true});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);
Copy the code

A sphere

        // Sphere mesh model
        var sphereGeometry = new THREE.SphereGeometry(1.20.20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
          color: 0xff00ff.specular: 0x4488ee.shininess: 12});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // Mesh model object Mesh
        sphere.translateY(120); // The sphere mesh model is shifted 120 along the positive Y-axis
        sphere.position.set(0.0.5);
        scene.add(sphere);
Copy the code

The cylinder

       // Cylindrical mesh model
        var cylinderGeometry = new THREE.CylinderGeometry(1.1.5.32);
        var cylinderMaterial = new THREE.MeshLambertMaterial({
          color: 0xffff00});var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); // Mesh model object Mesh
        cylinder.position.set(10.0.0); // set the xyz coordinate of cylinder to 10,0,0
        scene.add(cylinder); 
Copy the code

Coordinate system

       // The auxiliary coordinate system parameter 400 represents the coordinate system size, which can be set according to the scene size
        var axisHelper = new THREE.AxisHelper(20);
        scene.add(axisHelper);
Copy the code

A point source

        / / the point light source
        var point = new THREE.PointLight(0xffffff);
        point.position.set(0.0.0);
        scene.add(point); // Add a light source to the scene

        // Point light source 2 is symmetric with point about the origin
        var point2 = new THREE.PointLight(0xffffff);
        point2.position.set(-400, -200, -300); // Point light source position
        scene.add(point2); // Add a light source to the scene
Copy the code

Mouse operation rotation, zoom

         // Mouse rotation, zooming,OrbitControls need to be introduced separately
        new OrbitControls(camera, renderer.domElement);
Copy the code

The sphere, the cube rotates automatically

         var animate = function () {
          requestAnimationFrame(animate);

          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

          sphere.rotation.x += 0.01;
          sphere.rotation.y += 0.01;
          renderer.render(scene, camera);
        };

        animate();
Copy the code

initThreeThe complete code

function initThree(instance: HTMLElement | null) {
        var hetght = instance.clientHeight - 25;
        var width = instance.clientWidth - 25;

        // Create the Scene object
        var scene = new THREE.Scene();

        // Create the camera object
        var camera = new THREE.PerspectiveCamera(75.1.0.1.1000);

        // Create the renderer object
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, hetght);

        instance.append(renderer.domElement);
        renderer.render(scene, camera);
        camera.position.z = 5;
        renderer.setClearColor(0xeeeeee.1.0);

        // Cube mesh model
        var cubeGeometry = new THREE.BoxGeometry(1.1.1);
        // The Material object is Material
        var cubeMaterial = new THREE.MeshLambertMaterial({
          color: 0xff0000.opacity: 0.7.transparent: true});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);

        // Sphere mesh model
        var sphereGeometry = new THREE.SphereGeometry(1.20.20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
          color: 0xff00ff.specular: 0x4488ee.shininess: 12});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // Mesh model object Mesh
        sphere.translateY(120); // The sphere mesh model is shifted 120 along the positive Y-axis
        sphere.position.set(0.0.5);
        scene.add(sphere);

        // Cylindrical mesh model
        var cylinderGeometry = new THREE.CylinderGeometry(1.1.5.32);
        var cylinderMaterial = new THREE.MeshLambertMaterial({
          color: 0xffff00});var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); // Mesh model object Mesh
        cylinder.position.set(10.0.0); // set the xyz coordinate of cylinder to 10,0,0
        scene.add(cylinder); 

        // The auxiliary coordinate system parameter 400 represents the coordinate system size, which can be set according to the scene size
        var axisHelper = new THREE.AxisHelper(20);
        scene.add(axisHelper);

        / / the point light source
        var point = new THREE.PointLight(0xffffff);
        point.position.set(0.0.0);
        scene.add(point); // Add a light source to the scene

        // Point light source 2 is symmetric with point about the origin
        var point2 = new THREE.PointLight(0xffffff);
        point2.position.set(-400, -200, -300); // Point light source position
        scene.add(point2); // Add a light source to the scene

        // Mouse operation rotation, zoom
        new OrbitControls(camera, renderer.domElement);
        var animate = function () {
          requestAnimationFrame(animate);

          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

          sphere.rotation.x += 0.01;
          sphere.rotation.y += 0.01;
          renderer.render(scene, camera);
        };

        animate();
      }
Copy the code

Above –