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.js
Is 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 detailsAPI
Did 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,
steup
Function.ref
Define a reactive constantdom
After exposure totemplate
The use,ref
Mount to a specific element - in
initThree
Do 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 beyondinitThree
Methods in writing
- Here’s what we created
threejs
Something 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 –