three.js 基础教程

three.js 可能有人没有听过，但是微信小游戏跳一跳大家都玩过，对由three.js 基础上开发出来的

01下载three.js

02 three.js 目录

three
 ├── build   # 打包文件，含有 Three.js 构建出来的 JavaScript 文件，可以直接引入使用，并有压缩版
 ├── docs    # Three.js 的官方文档的资源构建；
 ├── editor  # Three.js 的一个网页版的模型编辑器；
 ├── examples   # Three.js 的官方案例，
 ├── files  
 ├── icon.png 
 ├── LICENSE
 ├── package-lock.json
 ├── package.json
 ├── README.md
 ├── src  # Three.js 的源文件；
 ├── test  # 测试代码
 └── utils  #其他插件 

03官网小案例

首先我们需要知道的是：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。

如果你做过3D建模，c4d等建模工程，对上面的名词一定很熟悉，你可以理解为，我们现在写的代码是将你想象的东西变成现实，要有块地，要有一个视角，然后你一想，最后出现一个基本土地模型

var scene = new THREE.Scene();  // 初始化一个场景 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  //初始化相机 
var renderer = new THREE.WebGLRenderer(); // 初始化一个渲染器
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器宽高
document.body.appendChild( renderer.domElement );  //注册到body

//创建模型 
var geometry = new THREE.BoxGeometry( 1, 1, 1 );  // 创建一个几何模型 BoxGeometry 
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 创建材质 颜色是绿色   
var cube = new THREE.Mesh( geometry, material ); //创建网格 
// 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
scene.add( cube ); //将网格添加到场景上 
camera.position.z = 5; // 规避像机和立方体重合
// 渲染场景
    var animate = function () {
        requestAnimationFrame(animate);
        // 动画
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    };
    animate();

基础功能之 Scene 场景