threejs笔记2

threejs笔记2

这是第一次学习threejs，记录一些学习笔记，简化知识点, 如果对您也有帮助请搜索头像二维码或者搜索小程序“上品威客”，感谢您的支持

三大组件

场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，我们才能够使用相机将场景渲染到网页上去。

场景

在Threejs中场景就只有一种，用THREE.Scene表示，构件场景new一个对象就可以，场景是所有物体的容器

相机

相机决定了场景中那个角度的物体会显示出来，相机却有很多种，不同相机呈现的方式不一样

渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制渲染器，renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。

创建组件的代码示例

var scene = new THREE.Scene();  // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);

添加物品到场景

var geometry = new THREE.CubeGeometry(1,1,1); 
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube);

THREE.CubeGeometry是一个正方体或者长方体，由它的3个参数所决定

渲染

渲染器结合相机和场景来得到结果画面。render( scene, camera, renderTarget, forceClear ) 各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

渲染循环

渲染有两种方式：实时渲染和离线渲染 。
离线渲染：事前准备好一帧一帧的图片进行渲染
实时渲染：就是需要不停的对画面进行渲染

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

requestAnimationFrame， 让浏览器去执行一次参数中的函数，render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。