three.js模板

tech2023-06-30 95

three.js模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>three.js模板</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style>  <script src="../../js/three.js"></script> <script src="../../js/OrbitControls.js"></script>  </head> <body> <script type="text/javascript"> var scene,camera,renderer, light,group; init();//开始初始化 //将需要初始化的放在该方法中统一初始化 function init(){ initScene();//初始化场景 initCamera();//初始化相机 initRenender();//初始化渲染器 initLight();//初始化光线 initOthers();//初始化其他参数 setWindown();//窗体的设置 setEventsMouse();//鼠标事件的定义 setKeyEvents();//定义键盘按键事件 initaxisHelper();//辅助坐标 Box(); } //初始化场景 function initScene(){ scene = new THREE.Scene();//创建场景 } //初始化相机 function initCamera(){ //创建一个摄像机对象 // camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000); // camera.position.z=3;//设置相机的位置 //创建相机对象 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(292, 109, 268);//设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) } //初始化渲染器 function initRenender(){ //创建渲染器 renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 renderer.setSize(window.innerWidth, window.innerHeight); } //其他内容初始化 function initOthers(){ document.body.appendChild(renderer.domElement);//渲染到浏览器 } function Box() { var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry //材质对象Material var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh scene.add(mesh); //网格模型添加到场景中 } //定义窗口的设置 function setWindown(){ //加入事件监听器,窗口自适应 window.addEventListener('resize', function(){ var width = window.innerWidth; var height = window.innerHeight; renderer.setSize(width,height); camera.aspect = width/height; camera.updateProjectionMatrix(); }); } //定义鼠标事件 function setEventsMouse(){ //点击了鼠标左键 window.addEventListener( 'click', function(e){ if(e.button===0){ console.log("点击了鼠标左键"); } } ); //点击了鼠标右键 window.addEventListener( 'contextmenu', function(e){ if(e.button===2){ console.log("点击了鼠标右键"); } } ); //鼠标移动坐标2D坐标 window.addEventListener( 'mousemove', function(e){ console.log('x:'+e.x); console.log('y:'+e.y); } ); } //定义键盘按键事件 function setKeyEvents(){ window.addEventListener('keydown',function(e){ console.log(e); }); } function initaxisHelper() { //辅助三维坐标系AxisHelper var axisHelper = new THREE.AxisHelper(250); scene.add(axisHelper); } //初始化光线 function initLight(){ //5. 光（Light）光源的基类。 light = new THREE.Light(0xFFFFFF,1.0); scene.add(light);//光线加入场景中 } //逻辑 var update=function(){ //物体随着XY轴旋转 //cube.rotation.x +=0.01; //cube.rotation.y += 0.005; } // 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 //requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧 } //循环运行update，render var loop=function() { requestAnimationFrame(loop);//请求再次执行渲染函数render，渲染下一帧 update(); render(); } loop();//循环开始 </script> </body> </html>

最新回复(0)