1.threejs的三大组件

threejs中有三大组件:场景(scene)、相机(camera)和渲染器(renderer),有这三样东西,我们才能够使用相机将场景渲染到网页上去

各自的功能:
  • 场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。
  • 相机相机可以视为画布,作用就是面对场景,在场景中取一个合适的景,把它拍下来。
  • 渲染器可以视为是canvas标签,作用就是将相机拍摄下来的图片,放到浏览器中去显示
var scene = new THREE.Scene();  // 1.场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 2.透视相机
var renderer = new THREE.WebGLRenderer();   // 3.渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
renderer.render(scene, camera); // 使用渲染器,结合相机和场景来得到结果画面
document.body.appendChild(renderer.domElement); // 将渲染结果加到页面中
看demo:basic.html

threejs
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。