由于项目需要展示3 d模型,所以对三做了点研究,分享出来希望能帮到大家
先看看效果:
var宽度、高度;
var渲染器;
函数initThree () {
宽度=document.documentElement.clientWidth/2;& lt; !——从=$ {foreach recommended_goods项=rgoods}——比;& lt; !——{/foreach}——比;
身高=document.documentElement.clientHeight/2;/*渲染器*/渲染器=new THREE.WebGLRenderer ();
渲染器。setSize(宽度、高度);
渲染器。setClearColor(新THREE.Color (0 x66666));
渲染器。gammaInput=true;
渲染器。gammaOutput=true;
document.body.appendChild (renderer.domElement);
}
之前
通过上面的代码不难看出我们设置了在身体里追加了一块画布宽高是客户的一半颜色为0 x66666这里要注意的是,渲染器=new THREE.WebGLRenderer ();因为我们所有的设置都是以渲染器为对象设置
下来我们需要调整摄像头即视觉角度
/*摄像头*/var相机;
函数initCamera () {
var VIEW_ANGLE=45,
方面=宽/高,=0.1附近
远=10000;
相机=new三人。PerspectiveCamera (VIEW_ANGLE方面,接近,远);
camera.position。组(20,0,0);//设置视野的中心坐标
camera.lookAt (scene.position);
}
之前
以上代码主要是控制视觉角度数值可以在后期根据自己的需求去调整
加载场景:
/*场景*/var场景;
函数initScene () {
现?new THREE.Scene ();
}
之前
加载灯光效果
/*灯光*/var, light2 light3;
函数initLight () {//平行光
光=new THREE.DirectionalLight (0 xffffff);
light.position。集(0 99 0).normalize ();
scene.add(光);//环境光
light2=new THREE.AmbientLight (0 x999999);
scene.add (light2);//点光源
light3=new THREE.PointLight (0 x00ff00);
light3.position。集(300,0,0);
scene.add (light3);
}
之前
显示模型对象:
/*显示对象*/var立方体;
函数initObject () {//ASCII文件
var装载机=new THREE.STLLoader ();
加载程序。addEventListener(“负载”,函数(事件){
加载var=. getelementbyid(“加载”);
loading.parentNode.removeChild(加载);
var几何=event.content;//砖红色
var=new三个材料。MeshPhongMaterial({环境:0 xff5533,颜色:0 xff5533,镜面:0 x111111,亮度:200});//纯黑色//var=new三个材料。MeshBasicMaterial ({envMap: THREE.ImageUtils。loadTexture (http://localhost: 8080/纹理/metal.jpg,新THREE.SphericalReflectionMapping()),透支:真});//粉色带阴影//var=new三个材料。MeshLambertMaterial({颜色:0 xff5533,一面:3。双边});//灰色//var=new三个材料。MeshLambertMaterial({颜色:000000});//材质设定(颜色)
var网=new三人。网格(几何、材料);
var=THREE.GeometryUtils.center中心(几何);
var boundbox=geometry.boundingBox;
var vector3=boundbox.size(空);
var vector3=boundbox.size(空);
console.log (vector3);
var=vector3.length规模();
camera.position。设置(规模,0,0);
camera.lookAt (scene.position);
scene.add(相机);//利用一个轴对象以可视化的3轴以简单的方式。x轴是红色的.Y轴是绿色的还是z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
var axisHelper=new THREE.AxisHelper (800);
scene.add (axisHelper);//周围边框
bboxHelper=new THREE.BoxHelper ();
bboxHelper。可见=true;
var meshMaterial=材料;
mainModel=new三人。网格(几何、meshMaterial);
bboxHelper.update (mainModel);
bboxHelper.geometry.computeBoundingBox ();
scene.add (bboxHelper);//地板网格//var gridHelper=new三人。GridHelper (500, 40);//500网格大小,20是网格的一步//gridHelper。位置=new三人。Vector3 (0, 0, 0);//gridHelper。旋转=new三人。欧拉(0,0,0);//scene.add (gridHelper);//var gridHelper2=gridHelper.clone ();//gridHelper2。旋转=new THREE.Euler(数学。π/2,0,0);//scene.add (gridHelper2);//var gridHelper3=gridHelper.clone ();//gridHelper3。旋转=new THREE.Euler(数学。π/2,0,数学。π/2);//scene.add (gridHelper3);////var网格=新三。GridHelper(300年,40岁,25日,[0,0,1],0 x000055, 0.2,没错,“# FFFFFF”、“左”);//scene.add(网格);
var x=(boundbox.max。x - boundbox.min.x) .toFixed (2);
var y=(boundbox.max。y - boundbox.min.y) .toFixed (2);
var z=(boundbox.max。z - boundbox.min.z) .toFixed (2);
console.log (x);
console.log (y);
console.log (z);
console.log (boundbox);
mesh.position.set (0, 0, 0);//mesh.position。x=scene.position.x;//mesh.position。y=scene.position。y;//mesh.position。z=scene.position.z;
scene.add(网);
renderer.clear ();
渲染器。呈现(场景、摄像头等);
});
加载程序。负载(“3 dfile/莫比乌斯环。STL的);
}
