Home > Article > Web Front-end > Three.js tutorial on drawing a 3D cube
Three.js tutorial on drawing a 3D cube
- 小云云Original
- 2018-01-18 10:22:274726browse
Three.js is a 3D JavaScript library. Based on the right-hand coordinate system, it can create simple or more complex three-dimensional graphics and apply colorful textures and materials. It can add colorful light sources, move objects in the 3D scene or add Scripted animations and more. This article introduces how to draw a 3D cube using three.js. You can refer to it if you need it.
Introduction
three.js is a WebGL framework. WebGL allows us to achieve 3D effects on canvas. The realization of 3D effects is still a relatively new thing in China, and there is not much information available for reference. This article is just an introductory article, introducing how to draw a 3D cube.
Basic concepts in Three.js
Three.js contains 3 basic concepts: Scene, Camera and Renderer.
The scene is the object that needs to be drawn, the camera represents the viewing angle, and the renderer is the carrier of drawing (can be attached to the DOM element of the browser),
also That is, we capture the scene through the camera and then draw it into the target medium.
Create scene, camera and renderer
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
The above code first creates a scene, then creates a PerspectiveCamera (stereoscopic camera), and then creates a WebGL renderer (note Three. js also supports non-3D Canvas 2D renderer), and then attaches it to the DOM sub-element of the HTML document body.
After the introduction, let me first present the renderings of the realization:
This is the rendering of the realization, it is quite three-dimensional, right?
Preparation before drawing
Before writing code, you must first download the latest three.js framework package and introduce your own page.
Specific implementation process
Prepare a canvas
This canvas is the canvas on which we display the entire 3D square, which is the black square in the picture above frame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
</body>
</html>
Clear drawing ideas
The next drawing process will involve multiple concepts: canvas, scene, camera, renderer.
In order to better understand the code of the drawing process and help memory, we first understand these concepts:
Suppose we are traveling and see a It’s a very beautiful scene, I want to record this 3D world
This beautiful scene is the scene, we use the camera to capture it and form a photo
In order to see this photo clearly, we place this photo on a canvas
Finally, we use renderer to modify and render it
In this way, we can successfully display this 3D world.
【The program is still very close to life.
The above is the detailed content of Three.js tutorial on drawing a 3D cube. For more information, please follow other related articles on the PHP Chinese website!