three.js

threejs官网

三维场景基本要素：

场景（Scene）：模型、灯光等

相机（Camera）：观察场景的视角

渲染器（Renderer）：场景渲染输出的目标

渲染（render）：执行渲染操作

效果图：

步骤：

一、创建场景 （scene）

    var scene = new THREE.Scene();//创建一个场景元素

二、添加网格模型（mesh）

    var geometry = new THREE.BoxGeometry(100,100,100);//长宽高

    var material = new THREE.MeshLambertMaterial({color:red});

    var mesh = new THREE.Mesh();

    scene.add(mesh);

三、添加灯光（light）

var light = new THREE.PointLight(0xffffff);//创建一个点光源，颜色为黑色

light.position.set(300,400,200);//光源的位置

scene.add(light);

四、添加相机（camera）

var camera = new THREE.PerspectiveCamera(40,800/600,1,1000);

camera.position.set(200,200,200);//相机的位置

camera.lookAt(scene.position);//相机朝向

五、创建渲染器（renderer）

var renderer = new WebGLRenderer();

renderer.setSize(800,600); //设置渲染器的尺寸

document.body.appendChild(renderer.domElement);

六、渲染（render）

renderer.render(scene,camera);

---

整体代码如下图