//创建场景
varscene= newTHREE.Scene();/**
* 相机设置*/
varwidth=window.innerWidth-16;//窗口宽度
varheight=window.innerHeight-20;//窗口高度
vark=width/height;//窗口宽高比
varcamera= newTHREE.PerspectiveCamera(75, k,1,1000);//创建透视相机对象
camera.position.set(200,300,100);//设置相机位置
camera.position.z= 200;/**
* 创建渲染器对象*/
varrenderer= newTHREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
document.body.appendChild(renderer.domElement);//body元素中插入canvas对象
//创建立方体模型
vargeometry= newTHREE.BoxGeometry(100,100,100);vartexture= newTHREE.TextureLoader().load("./img/tietu.jpg")//创建纹理贴图
varmaterial= newTHREE.MeshBasicMaterial({//创建材质
map: texture,
});
material.opacity= 0.9;
material.transparent= true;varcube= newTHREE.Mesh(geometry, material);//创建网格对象
scene.add(cube);//把网格对象添加到场景中
//点光源
varpoint= newTHREE.PointLight(0xffffff);
point.position.set(400,200,300);//点光源位置
scene.add(point);//点光源添加到场景中
//球体网格模型
vargeometry2= newTHREE.SphereGeometry(60,20,20);varmaterial2= newTHREE.MeshLambertMaterial({//网格材质
color:0x0000ff,
wireframe:true,//是否网格材质
//emissive:0xad1919,
vertexColors: THREE.NoColors,//specular:0x4488ee,
shininess:12});varmesh2= newTHREE.Mesh(geometry2, material2);//网格模型对象Mesh
mesh2.translateY(150);//球体网格模型沿Y轴正方向平移120
scene.add(mesh2);//圆柱网格模型
vargeometry3= newTHREE.CylinderGeometry(50,50,150,25);varmaterial3= newTHREE.MeshLambertMaterial({
color:0xffff00});varmesh3= newTHREE.Mesh(geometry3, material3);//网格模型对象Mesh
mesh3.position.set(150,25,0);//设置mesh3模型对象的xyz坐标为120,0,0
scene.add(mesh3);//
//辅助坐标系 参数250表示坐标系大小,可以根据场景大小去设置
varaxisHelper= newTHREE.AxisHelper(250);
scene.add(axisHelper);//添加帧渲染
functionrender() {
renderer.render(scene, camera);//执行渲染操作
cube.rotateY(0.01);//每次绕y轴旋转0.01弧度
requestAnimationFrame(render);//请求再次执行渲染函数render
}
render();varcontrols= newTHREE.OrbitControls(camera, renderer.domElement);//创建鼠标控制对象
//尺寸响应式
window.addEventListener('resize', ()=>{//初始化摄像机
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();//初始化渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
})