初识Three.js
2019-01-04 本文已影响0人
墨夜_caa3
什么是 Three.js ? 简单来看, Three 是 3D 的意思, js 是 JavaScript , 也就是用 JavaScript 开发 3D 的应用程序。
HelloWorld
···
<head>
<meta charset="UTF-8">
<title> HelloWorld </title>
<!-- 0. 引入three.js 文件 -->
<script src="./js/three.js" ></script>
</head>
···
// 1. 创建场景
var scene = new THREE.Scene()
// 2. 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.z = 5 //设置相机位置
// 3. 创建并设置渲染器
var renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 4. 创建网格模型添加到场景中
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 1), new THREE.MeshBasicMaterial({color: 0x00ffff}))
scene.add(cube)
// 5. 渲染
// 设置一个动画函数
var animate = function () {
// 在浏览器下次重绘前执行回调函数 回调的次数通常是每秒60次 也就是常说的FPS 是60
requestAnimationFrame(animate)
// 模型旋转
cube.rotation.x += 0.01
cube.rotation.y += 0.01
//渲染摄像机看见的场景
renderer.render(scene, camera)
}
animate()
渲染结果：
image
必要的三个组件
场景
创建场景：
var scene = new THREE.Scene()
场景是所有物体的容器。
相机
创建相机：
var camera = new THREE.PerspectiveCamera(视口角度, width/height, 视野最近距离, 视野最远距离)
PerspectiveCamera
相机就像人的眼睛。
渲染器
- 创建渲染器：
var renderer = new THREE.WebGLRenderer()
- 设置渲染区域尺寸：
renderer.setSize(width, height)
- 画布添加到页面中：
documment.body.appendChild(render.domElement)
渲染器就像视觉神经，缺少它，我们什么也看不见。
坐标系
三维坐标系分为两种：
-
左手坐标系
-
右手坐标系
坐标系
在 There.js 中采用的是右手坐标系。
物体旋转的方向
image
mesh.rotation.y += 0.1 正方向是四指指向的方向
