源码地址
https://github.com/lvtraveler/threejsStart
ThreeJS必不可少的四要素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://www.hewebgl.com/article/articledir/1</title> <style> canvas {width: 100%;height: 100%;} </style> </head> <body> <script src="three.min.js"></script> <script> //1、场景：在Threejs中场景就只有一种，用THREE.Scene来表示。场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。 var scene = new THREE.Scene(); //2、相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。 //场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。 //在Threejs中有多种相机,如：透视相机（THREE.PerspectiveCamera） var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//透视相机 //3、最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。 var renderer = new THREE.WebGLRenderer();//渲染器 //有了上述这三样东西，我们才能够使用相机将场景渲染到网页上去。 renderer.setSize(window.innerWidth,window.innerHeight); // 渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。 document.body.appendChild(renderer.domElement); //将一个物体添加到场景中 var geometry = new THREE.CubeGeometry(1,1,1);//CubeGeometry是一个正方体或者长方体,究竟是什么，由它的3个参数所决定 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry,material); scene.add(cube); camera.position.z = 5; //渲染函数 // 原型如下： // render( scene, camera, renderTarget, forceClear ) // renderTarget：渲染的目标，默认是渲染到前面定义的render变量中 // forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。 // 渲染有两种方式：实时渲染和离线渲染 。 // 离线渲染:它是事先渲染好一帧一帧的图片 //实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。 function render() { requestAnimationFrame(render);//渲染循环:这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了 cube.rotation.x += 0.1; cube.rotation.y += 0.1; //渲染应该使用渲染器，结合场景和相机来得到结果画面 renderer.render(scene,camera) } render() </script> </body> </html>
创建一个矩形
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body onload="init()"> <!-- <canvas id="mainCanvas" width="400px" height="300px"></canvas>--> <script src="https://cdn.bootcss.com/three.js/r59/three.js"></script> <script> //一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体(Object) function init() { //1、渲染器 //渲染器将和Canvas元素进行绑定 var renderer = new THREE.WebGLRenderer(); //设置Canvas的宽400像素，高300像素 renderer.setSize(400,300); //行将渲染器对应的Canvas元素添加到<body>中 document.getElementsByTagName('body')[0].appendChild(renderer.domElement); //将背景色（用于清除画面的颜色）设置为黑色 renderer.setClearColor(0x000000); //2、场景（Scene） //在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。 // 一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。 var scene = new THREE.Scene(); //3、照相机（Camera） // WebGL和Three.js使用的坐标系是右手坐标系 // 定义直透视投影的照相机 var camera = new THREE.PerspectiveCamera(45,4/3,1,1000); camera.position.set(0,0,5); //照相机也需要被添加到场景中 scene.add(camera) //4、物体 //创建一个x、y、z方向长度分别为1、2、3的长方体，并将其设置为红色 //长度1：其单位与屏幕分辨率等无关，简单地说，它就是一个虚拟空间的坐标系，1代表多少并没有实际的意义，而重要的是相对长度 var cube = new THREE.Mesh(new THREE.CubeGeometry(3,2,1), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); //把创建好的长方体添加到场景中 scene.add(cube); //最后，渲染 //在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了 //只需要调用渲染器的渲染函数，就能使其渲染一次了 renderer.render(scene,camera) } </script> </body> </html>
THREE 对象脑图
