源码地址
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 对象脑图
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
