three.js实现球体

最近学习了一下three，记录一下，通过使用three实现一个球体

• 在本地文件引入three.js文件和OrbitControls.js文件
• 呈现效果

<div id="container"></div>
var scene, camera, renderer

function initTree() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100)

    renderer = new THREE.WebGLRenderer()

    renderer.setSize(document.body.clientWidth, document.body.clientHeight)

    document.getElementById("container").appendChild(renderer.domElement);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    useSphere()
    loop()
}

function useSphere() {
    var sphereGeometry = new THREE.SphereGeometry(1, 50, 50)

    var sphere = new THREE.Mesh(sphereGeometry)
    sphere.material.wireframe = true
    scene.add(sphere)

    sphere.geometry.scale(1, 1, -1)

    camera.position.set(0, 0, 2)
}

function loop() {
    requestAnimationFrame(loop)
    renderer.render(scene, camera)
}
window.onload = initTree

• 把上面代码放在自己文件中，运行就可以看到效果了