Take creating a cube as an example
install
Install three: NPM I three
use
quote
Three and the camera control orbitcontrols included in three are introduced to control the camera:
Initialize scene
Scene: all three things in the scene.
Camera: when using the perspective camera, pay attention to adjusting the parameters, otherwise you will not see the object and scene. The parameters in turn are: FOV field of view, the angle range you can see, aspect aspect aspect ratio, usually window aspect ratio, near, the position where you start rendering the scene based on the camera position is generally small, the default is 0.1, far, and the position where you end rendering the scene based on the camera position, which will affect the rendering efficiency. The default is 1000.
Renderer: renderer, which is used to generate canvas and set its parameters. It needs to appendChild to the specified element in DOM.
Sky box
Create a sky box (a cube that wraps the scene object, and the angle can be changed with the mouse dragging). The corresponding sequence of the six cube maps is right, left, up, down, front and back. The picture needs to be a specially made panorama. Otherwise, there will be obvious splicing edges and corners in the scene world:
You can also directly use a map as the background of the scene, but using this method, the scene will not change the angle and scale with the mouse:
Camera controls
Create a camera control, in which you need to add the canvas elements of the camera and rendering to the control orbitcontrols. You can control drag, zoom, damping, deflection angle and rotation through the control (this rotation method is different from the model rotation, which is realized by controlling the rotation of the object mesh, and the model rotation is used in this article):
light source
Create light source, you can set ambient light and point light source, and the final displayed light and shadow effect is calculated and rendered through various light effects:
Cube
The created mesh (which can be understood as the created object) is added to the scene through add. In the mesh, there are geometry and material. The geometry of the cube can use the boxgeometry of three, while the material can use the meshlambertmaterial material material, which is responsive to light. It is used to create dim and non luminous objects. Its own color can be set, and its own color is not affected by the environment. You can also set texture map for materials (you need to import pictures as textures):
Continuous rendering
Continuously render the scene and camera, where requestanimationframe is the requested animation frame, which is refreshed at 60Hz (but it will be triggered frequently in the high refresh screen). When users switch labels, rendering will be suspended to save CPU overhead. The mouse control needs to call update() in rendering to update:
Complete code
Click to view the code
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // Mouse control
import cubeImg from "@/assets/img/cube.png";
import BgImg from "@/assets/img/bg.png";
import right from "@/assets/img/space/right.jpg";
import left from "@/assets/img/space/left.jpg";
import top from "@/assets/img/space/top.jpg";
import bottom from "@/assets/img/space/bottom.jpg";
import front from "@/assets/img/space/front.jpg";
import back from "@/assets/img/space/back.jpg";
export default {
components: {},
data() {
return {
Scene: '', // scene
Camera: '', // camera
Renderer: '', // renderer
Mousecontrols: '', // track control
Pointlight: '', // point light
Ambientlight: '', // ambient light
Cube: '', // cube
Cubeimg: cubeimg, // cube map
};
},
mounted() {
this.init();
},
methods: {
//Initialize scene
init() {
this. scene = new THREE. Scene(); // New scene
let width = window. innerWidth; // Window width
let height = window. innerHeight; // Window height
let k = width / height; // Window aspect ratio
this. camera = new THREE. PerspectiveCamera(60, k, 0.1, 10); // Perspective camera
this. camera. position. set(0, 0, 2.5); // Set camera position
//Create renderer
this.renderer = new THREE.WebGLRenderer({
Antialias: true, // anti aliasing
alpha: true,
});
this. renderer. setSize(width, height); // Set render area size
document
.getElementById("container")
.appendChild(this.renderer.domElement); // Add canvas to container
let axes = new THREE. AxesHelper(1); // Coordinate system (aided development)
axes.rotation.x = 0.1;
// this.scene.add(axes);
this.createSkyBox();
// this.createUniverse();
this.createOrbitControls();
this.createLight();
this.createCube();
this.repeatRender();
},
//Create sky box
createSkyBox() {
//Load sky box texture
let cubeTexture = new THREE.CubeTextureLoader().load(
[right,left,top,bottom,front,back]
);
this. scene. background = cubeTexture; // Set scene background
},
//Create a cosmic background
createUniverse(){
let texture = new THREE. TextureLoader(). load(BgImg);// Load background map
this. scene. background = texture;// Set scene background
},
//Create track control
createOrbitControls() {
//No scaling damping
this.mouseControls = new OrbitControls(
this.camera,
this.renderer.domElement
); // Create control object
this. mouseControls. enablePan = false; // Right click pan drag
this. mouseControls. enableZoom = true; // Mouse zoom
this. mouseControls. minDistance = 2; // The distance range of the camera from the origin
this.mouseControls.maxDistance = 5;
this. mouseControls. enableDamping = true; // Sliding damping
this. mouseControls. dampingFactor = 0.1; // (default. 25)
this. mouseControls. maxPolarAngle = (Math.PI / 4) * 3; // Y rotation angle range
this.mouseControls.minPolarAngle = Math.PI / 4;
// this. mouseControls. autoRotate = true; // Rotation (camera)
// this. mouseControls. autoRotateSpeed = 5; // Rotation speed
},
//Create light source
createLight() {
this. ambientLight = new THREE. AmbientLight(0x666666); // Set ambient light
this. scene. add(this.ambientLight); // Add ambient light to the scene
this.pointLight = new THREE.PointLight(0xffffff, 1, 0);
this. pointLight. position. set(200, 200, 200); // Set point light location
this. scene. add(this.pointLight); // Add a point light to the scene
},
//Create cube
createCube() {
let geometry = new THREE. BoxGeometry(1, 1, 1); // Geometry
//Material
let material = new THREE.MeshLambertMaterial({
map: new THREE. TextureLoader(). Load (this. Cubeimg), // import image texture
});
this. cube = new THREE. Mesh(geometry, material); // Add geometry and materials to the mesh
this.cube.rotation.set(10, 10, 0);
this. scene. add(this.cube); // Add a cube mesh to the scene
},
//Repeat rendering
repeatRender() {
//Request the animation frame, call it every time the screen is refreshed, and bind the screen refresh frequency
requestAnimationFrame(this.repeatRender);
this. mouseControls. update(); // Real time update track control
this. cube. rotation. y += .01;// The rotation angle with y as the axis is increased by 0.01 per frame
this. renderer. render(this.scene, this.camera); // Render the scene and camera
},
},
};Picture material
Sky box map
back.jpg：
bottom.jpg：
front.jpg：
left.jpg：
right.jpg：
top.jpg：
Cube map
cube.png：
