新建一个 3Ddemo

var scene=new THREE.Scene(); 

// 创建一个场景

var geomtry=new THREE.BoxGeometry(110,0.1,100);

//创建一个物体模型 参数为  物体的 x y z  标量

var materil=new THREE.MeshLambertMaterial({color:0xff0000});

// 创建物体材质

var mesh=new THREE.Mesh(geomtry,materil);

// 创建一个物体  需要两个形参   物体模型以及材质

var mesh2=newTHREE.Mesh(geomtry,materil);

// 创建第一个 物体，

mesh.position.set(0,30,0)

// 物体1 设置位置 

mesh2.position.set(0,0,0)

// 物体2 设置位置

scene.add(mesh);

//将物体添加到场景

scene.add(mesh2);

//将物体添加到场景

var light=new THREE.PointLight(0xffffff);

// 创建光源 

light.position.set(300,400,200);

// 设置光源位置

scene.add(light);

//添加光源到场景中

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

//创建 一个相机  参数分别为   相机的视角，视觉的宽高比，最近视角 ，最远视觉

camera.position.set(200,200,200);

// 设置相机的位置

camera.lookAt(scene.position);

// 设置相机的视野为 场景

varr ender=new THREE.WebGLRenderer({

antialias:true,//是否开启反锯齿

precision:"highp",//着色精度选择

alpha:true// 背景透明

});

// 创建一个渲染器

render.setClearColor(0x000000,1.0);

// 设置背景 透明   // alpha 为true  透明度才有效

render.setSize(800,600);

// 设置渲染器到 尺寸

document.body.appendChild(render.domElement);

将渲染器填充到html页面中

render.render(scene,camera)

//渲染

代码 如下

效果：