初识Three.js

什么是 Three.js ? 简单来看, Three 是 3D 的意思, js 是 JavaScript , 也就是用 JavaScript 开发 3D 的应用程序。

HelloWorld

···



    

    

    

    



···

    // 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 正方向是四指指向的方向

---

原文链接