新建一个 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)

//渲染

代码如下

效果：