Three.js绘制简单的立体球形

Three.js在国内使用的貌似并不算多，我看了下，教程也不是特别多的，今天正好有时间，将自己之前学习的三维框架整理一下，在CSDN上发一个小笔记。

下面是本人使用Three.js框架创建立体球形的小实例：

首先引入相关的Three.js库

    <script src="./3d/libs/three.js"></script>
    <script src="./3d/libs/js/objects/Reflector.js"></script>
    <script src="./3d/libs/js/controls/OrbitControls.js"></script>
    <script src="./3d/libs/js/lib/inflate.module.min.js"></script>
    <script src="./3d/libs/js/loaders/FBXLoader.js"></script>

       本实例不需要创建dom元素，Three.js创建的渲染器中提供了canvas元素。我们只需要获取出来，并放入body中就可以了

如：var renderer = new THREE.WebGLRenderer({alpha:true});

       document.body.appendChild(renderer.domElement)

接下来是最重要的：

// 声明一个场景、照相机视角、渲染器
var scene,camera,renderer;
// 声明一个点光源、环境光源
var point,ambient;
function init(){
    // 创建场景
    scene = new THREE.Scene();
    // 创建视角
    camera = new  THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000)
    // 设置视角
    camera.position.set(100,100,100)
    // 将设置好的视角加入照相机中
    camera.lookAt(scene.position)
    // 创建渲染器
    renderer = new THREE.WebGLRenderer({alpha:true})
    renderer.setSize(window.innerWidth,window.innerHeight)
    renderer.setClearColor(0xcccccc);
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.enabled = true;
    
    // 默认将三维图形canvas放入document中
    document.body.appendChild(renderer.domElement)

    // 创建点光源
    point = new THREE.PointLight(0xffffff)
    point.position.set(100,100,300)
    scene.add(point)
    // 创建环境光，如果不创建光源，渲染的界面将是一片黑
    ambient = new THREE.AmbientLight(0xffffff)
    scene.add(ambient)

    // 创建平面并加入Mesh盒子中
    var plane = new THREE.PlaneBufferGeometry(window.innerWidth,window.innerHeight)
    var material = new THREE.MeshLambertMaterial({
        color:0xffffff,
        transparent:true,
        opacity:0.5
    })
    var mesh = new THREE.Mesh(plane,material)
    mesh.position.y = 0.1;
    mesh.rotation.x = -Math.PI / 2;
    scene.add(mesh)

    // 创建球形对象并加入Mesh中
    var sphere = new THREE.SphereGeometry(100,100,100)
    var sphereMatrial = new THREE.MeshPhongMaterial({
        color:0x7c29bb
    })
    var sphereMath = new THREE.Mesh(sphere,sphereMatrial);
    sphereMath.position.y = 20;
    sphereMath.geometry.computeBoundingBox();
    scene.add(sphereMath);

    // 创建control控制器，如果不创建则无法拖动屏幕
    var controls = new THREE.OrbitControls(camera,renderer.domElement)
    window.addEventListener("resize",Resize)
}
init()
function Resize(){
    // 当屏幕大小改变时更改
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth,window.innerHeight)
}
function render(){
    // 通过requestAnimationFrame函数不断地渲染界面
    // 这里不要考虑性能问题，如何不刷新式渲染，就没办法拖动看图形
    requestAnimationFrame(render)
    renderer.render(scene,camera)
}
render()

效果图如下：

好了，大概的效果就是这样了

各位同胞如何有学Three、cesium这样的群记得拉我一下哦，嘻嘻。

我对三维挺感兴趣的，但是自己学习比较困难，而且里面的绘制扇形啥的，还需要数学，计算机图形学的底子。