Day 1: Basic modeling knowledge

First up the code (from the big guy blog) :

<! DOCTYPE html>Copy the code
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; overflow: hidden; </style> <! <script SRC ="./three.min.js"></script> </head> <body> <script> /** * Create scene object */ var scene=new THREE.Scene(); /** * create mesh model */ var box=new THREE.BoxGeometry(50,50,50); / / create a cube geometry object var material = new THREE. MeshLambertMaterial (xff3040} {color: 0); Var mesh=new THREE.Mesh(box,material); // Mesh model object scene.add(mesh); Var point=new three.pointlight (0xffFFFF); Point. The position. The set (100200300); Scene.add (point); Var ambient=new THREE.AmbientLight(0x444444); scene.add(ambient); /** * camera Settings */ var width = window.innerWidth; Var height = window.innerheight; Var k = width/height; Var s = 100; OrthographicCamera =new THREE.OrthographicCamera(-s*k,s*k, s,-s,1,1000); Camera. The position. The set (200300200); // Set the camera position camera.lookat (scene.position); Var renderer=new three.webglrenderer (); renderer.setSize(width,height); renderer.setClearColor(0xb9d3ff,1); / / set the background color document. The body. The appendChild (the renderer. DomElement accordingly); Renderer. render(scene,camera); </script>Copy the code

Take a look at the effect:

This is a very basic modeling, of course, the cube can also be changed into a sphere, etc..

Parse the code:

First introduces three js, link is: www.yanhuangxueyuan.com/threejs/bui…

Basic three steps:

1. Create scene objects:

① Grid model cube ② light source (where does the light come from)

2. The camera

3. Create a renderer render operation

1. The first step is to create the scene object, just like creating the instance object

var scene = new THREE.Scene()

The scene will be followed by the add to add many elements, including models and light sources.

You need a 3D model for your scene

Var box = new THREE.BoxGeometry(50,50,50)

This is equivalent to creating a cube model, of course, you can also refer to the official API TextGeometry font model and SphereGeometry sphere model, etc., you can go to the official website to see, or quite interesting, here is the first use of the cube model, for the following understanding.

The parameters in the model are the dimensions, representing the X, Y, and Z axes (X is the right hand of the browser, Y is the right hand of the browser, and Z is the left hand of the browser). For example, increasing the first parameter will increase the width of the model, while the second parameter will increase the width of the model

Next is the material object

var material = new THREE.MeshLambertMaterial({color: 0xff3040,emissive:0x0000ff})

In addition to the basic color attribute, there are many other attributes such as emissive material itself luminous color, texture and so on

Mesh model object (put the 3D model and material in it)

var mesh=new THREE.Mesh(box,material);

There is also the light source and the ambient light. The light source refers to the light emitted from a point to illuminate the 3D model. The ambient light is the overall brightness of the model

var point = new THREE.PointLight(0xffffff)

The parameter is the color of the light source,

var ambient = new THREE.AmbientLight(0x444444)

The parameter is brightness (incremental)

Then set the position of the light source

Point. The position. The set (100200300).

The parameter is the position of the light coming from the Y, Z, X axis, like the X axis is the largest, the light from the X axis is the strongest, the brighter this side is, the darker the other sides are

After setting them up, add them to the scene object

scene.add(mesh); // Add the grid model to the scene

scene.add(point); // Add a light source to the scene

scene.add(ambient); // Add ambient light to the scene

var ambient=new THREE.AmbientLight(0x444444);

2. Camera (i.e. perspective of the actual 3D model)

Create a camera instance object

var camera=new THREE.OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number );

Left – The left side of the camera cone. Right – The right side of the camera cone. Top – The upper side of the camera cone. Bottom – The lower side of the camera cone. Near – The near end of the camera’s visual cone. Far – Distal end of camera cone.

Camera. The position. The set (200200200); // Set the camera position from which to view the 3D model

camera.lookAt(scene.position); // Set the camera orientation (the scene object to point to)

3. Create a renderer object for rendering

var renderer=new THREE.WebGLRenderer();

Set the size

renderer.setSize(width,height);

Insert a Canvas object into the body element

document.body.appendChild(renderer.domElement);

Perform the render operation, render the scene and camera above

renderer.render(scene,camera);

This is the simplest 3D model drawing built, isn’t it very simple (dog head save life)