ThreeJS笔记(一)

ThreeJS的本质是WebGL，但是webGL使用起来不是很方便，threeJS则提供了比较上层的封装，开发起来更加轻便。

环境配置

首先从github下载源码
把ThreeJS包含到工程目录
写个代码测试一下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ThreeJS测试</title>
    <script src="three.js"></script>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

index.js

"use strict";
console.log(THREE.REVISION) //测试版本号

ThreeJS的版本更新非常频繁，目前输出的是83

测试样例

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试样例</title>
    <script src="three.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border: dashed"></canvas>
<script src="index.js"></script>
</body>
</html>

index.js

"use strict"
var renderer, camera, scene, cube,width, height

// 初始化renderer
function initRenderer() {
    width = document.getElementById('canvas').clientWidth
    height = document.getElementById('canvas').clientHeight
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('canvas')
    })
    renderer.setSize(width, height)
    renderer.setClearColor(0xFFFFFF, 1.0) //设置清除颜色和透明度
}

function initCamera() {
    // 使用正投影照相机
    camera = new THREE.OrthographicCamera(width/-2, width/2, height/2, height/-2,1,1000)
    // 找相机位置设定
    camera.position.x = 0
    camera.position.y = 0
    camera.position.z = 200
    // 照相机顶部矢量设定(相当于人的头顶)，这里采用右手坐标系，因此是向上
    camera.up.x = 0
    camera.up.y = 1
    camera.up.z = 0
    // 视线的目标点
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    })
}
// 新建场景，作为容器
function initScene() {
    scene = new THREE.Scene()
}
function initObject() {
    // 新建cube对象，定义形状
    var geometry = new THREE.CubeGeometry(100, 100, 100)
    // 新建material对象，定义性质
    var material = new THREE.MeshNormalMaterial();
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube)
    // 以下是博主自己定义的
    cube.vx = 1
    cube.vy = 1
}

// 使用requestAnimationFrame回调render进行试试更新
function render() {
    requestAnimationFrame(render)
    cube.rotation.x += 0.05
    cube.rotation.y += 0.05

    // 平移加一些随机扰动
    if(cube.position.x>width/2 || cube.position.x<-width/2)
        cube.vx = -cube.vx + Math.random() - 0.5
    if(cube.position.y>height/2 || cube.position.y<-height/2)
        cube.vy = -cube.vy + Math.random() - 0.5
    cube.position.x += cube.vx
    cube.position.y += cube.vy

    renderer.render(scene, camera)
}
// 总调度
function start()
{
    initRenderer()
    initCamera()
    initScene()
    initObject()
    render()
}
// 载入函数
window.onload = start()

ThreeJS笔记(一)

ThreeJS笔记(一)

环境配置

测试样例

运行结果