初识Three.js

什么是 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()

渲染结果:

必要的三个组件

场景

创建场景:

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 中采用的是右手坐标系。

物体旋转的方向

mesh.rotation.y += 0.1 正方向是四指指向的方向


© 2019 墨夜 All Rights Reserved.
Theme by hiero