01-Three.js 安装以及介绍

安装依赖

  npm install three

搭建本地服务器 Node.js server

为什么要搭建一个服务器呢？ 当页面需要加载外部图片或者模型文件时，控制台会提示跨域问题，会导致案例无法正常打开；

  npm install http-server -g

  // 在文件目录下运行，端口号为8000
  http-server . -p 8000

浏览器WebGL兼容性检查 WebGL.js

  if (!THREE.WEBGL.isWebGLAvailable()) {
    var warning = THREE.WEBGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}

// 浏览器控制台输入此命令，可以查看three.js版本号
THREE.REVISION

---

介绍

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

• 场景（scene）： 模型、灯光等
• 相机（camera）： 观察场景的视角
• 渲染器（renderer）： 场景渲染输出的目标

代码示例

/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();

/**
 * 创建网格模型
 */
// 创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100); 
 // 材质对象Material
var material = new THREE.MeshLambertMaterial({
    color: 0xff1100
});
// 网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material); 
// 网格模型添加到场景中
scene.add(mesh); 


/**
 * 光源设置
 */
// 点光源 光照强度
var point = new THREE.PointLight(0xffffff);
point.position.set(100, 200, 300); // 点光源位置
// 点光源添加到场景中
scene.add(point); 
// 环境光
var ambient = new THREE.AmbientLight(0x666666);
scene.add(ambient);

/**
 * 相机设置
 */
// 窗口宽度
var width = window.innerWidth; 
// 窗口高度
var height = window.innerHeight; 
// 窗口宽高比
var k = width / height;
// 三维场景显示范围控制系数，系数越大，显示的范围越大
var s = 200; 

/**
 * 
 * 创建相机对象, 参数对应如下
 * 
 * left — 摄像机视锥体左侧面。
 * right — 摄像机视锥体右侧面。
 * top — 摄像机视锥体上侧面。
 * bottom — 摄像机视锥体下侧面。
 * near — 摄像机视锥体近端面。
 * far — 摄像机视锥体远端面。
 */
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 设置相机位置
camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

/**
 * 创建鼠标控件对象
 */
var controls = new THREE.OrbitControls(camera, renderer.domElement);

function animate() {
    requestAnimationFrame(animate);
    // 更新控制器
    controls.update();
    renderer.render(scene, camera);
}

animate()