Learn the basics of Three.js-JS Tutorial-php.cn

Learn the basics of Three.js

高洛峰

Release： 2017-01-21 09:21:11

Original

1984 people have browsed it

1. Some theoretical explanations about using Three.js

1. Please refer to the official website address https://threejs.org/

2. Necessary conditions for using three.js < ;Scene A scene, camera a camera, renderer a renderer All three are indispensable>

To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.

3. The relationship between scene A scene, camera a camera, and renderer a renderer

Learn the basics of Three.js

3. Case Using Three.js to draw a rotating cube

The effect diagram is as follows

Learn the basics of Three.js

Case case source code

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>用threejs构建室内模型</title>
 <style>
 #canvas-frame {
 width: 100%;
 height: 600px;
 }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
 var renderer, //渲染器
 width = document.getElementById(&#39;canvas-frame&#39;).clientWidth, //画布宽
 height = document.getElementById(&#39;canvas-frame&#39;).clientHeight; //画布高
 //初始化渲染器
 function initThree(){
 renderer = new THREE.WebGLRenderer({
  antialias : true
  //canvas: document.getElementById(&#39;canvas-frame&#39;)
 });
 renderer.setSize(width, height);
 renderer.setClearColor(0xFFFFFF, 1.0);
 document.getElementById(&#39;canvas-frame&#39;).appendChild(renderer.domElement);
 renderer.setClearColor(0xFFFFFF, 1.0);
 }
 //初始化场景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透视相机
 camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
 camera.position.x = 50;
 camera.position.y = 150;
 camera.position.z =150;
 camera.up.x = 0;
 camera.up.y = 1; //相机朝向--相机上方为y轴
 camera.up.z = 0;
 camera.lookAt({ //相机的中心点
  x : 0,
  y : 0,
  z : 0
 });
 // camera 正交相机
 /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
 camera.position.x = 250;
 camera.position.y = 100;
 camera.position.z = 1800;
 camera.up.x = 0;
 camera.up.y = 1; //相机朝向--相机上方为y轴
 camera.up.z = 0;
 camera.lookAt({ //相机的中心点
  x : 0,
  y : 0,
  z : 0
 });*/
 }
 function initLight(){
 // light--这里使用环境光
 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
 //light.position.set(600, 1000, 800);
 var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
 scene.add(light);
 }
 function initObject(){ //初始化对象
 //初始化地板
 initFloor();
 }
 function initGrid(){ //辅助网格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //创建一个立方体
 var geometry = new THREE.BoxGeometry(80, 20, 80);
  for ( var i = 0; i < geometry.faces.length; i += 2 ) {
  var hex = Math.random() * 0xffffff;
  geometry.faces[ i ].color.setHex( hex );
  geometry.faces[ i + 1 ].color.setHex( hex );
 }
 var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
 //将material材料添加到几何体geometry
 var mesh = new THREE.Mesh(geometry, material);
 mesh.position = new THREE.Vector3(0,0,0);
 scene.add(mesh);
 }
 //初始化页面加载
 function threeStart(){
 //初始化渲染器
 initThree();
 //初始化场景
 initScene();
 //初始透视化相机
 initCamera();
 //初始化光源
 initLight();
 //模型对象
 initObject();
 //初始化网格辅助线
 initGrid();
 renderer.render(scene, camera);
 //实时动画
 //animation();
 }
 function animation(){
 //渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
 }
 </script>
</html>

Copy after login

1. Scene A scene is a three-dimensional space. Use the [Scene] class to declare an object called [scene].

2. Notes on the PerspectiveCamera perspective camera in the above case

1. The default observation direction of the camera is to point in the negative direction of the z-axis (that is, towards the screen), so when the coordinates are changed, Point the camera to the origin to observe the object.

2. Use the lookAt method to set the center of the camera's field of view. The parameter of "lookAt()" is an object whose attributes contain the center coordinates "x", "y" and "z".

3. The perspective camera is used in the case (the closer the object is from the viewpoint, the larger it is, and the distant object is drawn smaller), which is consistent with the way we see objects in daily life. )

4. Set the upward direction of the camera to the positive y-axis camera.up.x = 0; camera.up.y = 1; //Camera orientation - the upper direction of the camera is the y-axis camera.up. z = 0;

camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;

Copy after login

3. Description of related parameters of perspective camera

new THREE.PerspectiveCamera(fov, aspect, near,far) Perspective camera

Viewing angle: fov The larger the field of view (called shooting distance in some places), the smaller the objects in the scene. The smaller the field of view, the larger the objects in the scene.

Aspect ratio: aspect

Camera distance The closest distance to the view volume: near

The farthest distance from the camera to the view volume: far

Learn the basics of Three.js

Animation of the above case Principle: The camera rotates around the y-axis, and keeps the objects in the scene in the camera's field of view. The pictures taken by the camera are displayed in the browser in real time

function animation(){
 //相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
 //实时渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
}

Copy after login

4. Renderer The process of mapping objects in three-dimensional space to a two-dimensional plane is called three-dimensional rendering. Generally speaking, we call the rendering operation a renderer.

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope that there will be more PHP Chinese websites!

For more articles related to learning the basics of Three.js, please pay attention to the PHP Chinese website!