Vue3 uses Threejs to draw some simple geometry

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 ~

`threejs`The paper

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

Scene Scene

A scene is a container for holding geometry
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.
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 beyond`initThree`Methods 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

`initThree`The 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 –

Vue3 uses Threejs to draw some simple geometry

preface

threejsThe paper

Dependent package version

Vue3 DOM operation

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

The cube

A sphere

The cylinder

Coordinate system

A point source

Mouse operation rotation, zoom

The sphere, the cube rotates automatically

initThreeThe complete code

Related Posts

Js scope (variable promotion, pre-parsing) example

Thoroughly understand the Promise implementation principle from shallow to deep

TypeScript Learning (2)

`threejs`The paper

Create scenes, cameras, renderers in this section and beyond`initThree`Methods in writing

`initThree`The complete code