threeJS绘制球体

使用three.js绘制球体

实现思路：
1. 生成三大组件：场景、相机、渲染器；
2. 场景添加光源；
3. 场景添加球体，并为球体添加纹理贴图；
4. 循环渲染。

---

首先，初始化变量，包括用到的渲染器、场景、相机、球体、以及轨道控件。

let webGLRenderer, camera, scene, sphere, orbitControls;

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

生成渲染器并添加到页面：

function initRenderer() {
   webGLRenderer = new THREE.WebGLRenderer({
        antialias: true,   // 抗锯齿
    });
    webGLRenderer.setSize(windowWidth, windowHeight);
    webGLRenderer.setClearColor(new THREE.Color(0x000000));  // color, alpha
    document.getElementById('canvas-frame').appendChild(webGLRenderer.domElement);
}

创建相机，聚焦到 (0, 0, 0) 位置。

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, windowWidth / windowHeight, 1, 1000);  // 创建透视相机
    camera.position.z = 400;
    camera.up.y = 1;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
}

创建场景：

function initScene() {
   scene = new THREE.Scene();
}

场景中添加环境光以及平行光源：

function initLight() {
   const ambiLight = new THREE.AmbientLight(0x333333);
   scene.add(ambiLight);

   const direLight = new THREE.DirectionalLight(0xffffff, 1.0);  // 平行光 DirectionalLight (光源颜色的RGB数值, 光源强度数值) 
   direLight.position.set(500, 500, 500);
   scene.add(direLight);
}

添加球体，使用TextureLoader纹理加载器加载纹理， 并使用材质的map属性设置纹理贴图：

function initObject() {
   const loader = new THREE.TextureLoader();
   loader.load("../textures/planets/earth.jpg", (texture) => {
	   const mat = new THREE.MeshLambertMaterial();
	   // const mat = new THREE.MeshPhongMaterial();
	   mat.map = texture;
	   sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 60, 60), mat);
	   scene.add(sphere);
  })
}

three.js 加载模型或者是纹理图片时需要一个本地的web服务器，可使用 nodeJs 的 HTTP Server 模块启动。

• npm install -g http-server
• http-server

添加轨道控件：

function initOrbit() {
   orbitControls = new THREE.OrbitControls(camera, webGLRenderer.domElement);
}

循环渲染函数：

function render() {
   // 使用requestAnimationFrame按照浏览器定义时间间隔调用函数，并保证动画尽量平滑、高效
   requestAnimationFrame(render);
   // 球体自动绕Y轴旋转
   if (sphere) sphere.rotation.y += 0.01;
   // 在对摄像机的转换进行任何手动更改之后，必须调用orbitControls.update()
   orbitControls.update();
   webGLRenderer.render(scene, camera);
}

最后，所有函数按顺序定义，完成绘制：

// 初始化函数
function init() {
    // 创建 WebGLobal 渲染器
    initRenderer();
    // 生成相机
    initCamera();
    // 生成场景
    initScene();
    // 添加光源
    initLight();
    // 添加物体
    initObject();
    // 添加轨道控件
    initOrbit();
	// 渲染
    webGLRenderer.render(scene, camera);
    render();
}

最终效果：