源码地址
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>