Detailed example of three.js drawing a 3D cube-JS Tutorial-php.cn

Detailed example of three.js drawing a 3D cube

小云云

Release： 2017-12-19 16:34:12

Original

2922 people have browsed it

This article will explain in detail three.js to draw a 3D cube with an example. 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. Add colorful light sources, move objects in the 3D scene or add scripted animations, etc. 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 );

Copy after login

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>

Copy after login

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 Detailed example of three.js drawing a 3D cube. For more information, please follow other related articles on the PHP Chinese website!