three.js模板

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>three.js模板</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="../../js/three.js"></script><script src="../../js/OrbitControls.js"></script><!-- <script src="./three.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//材质对象Materialvar material = new THREE.MeshLambertMaterial({color: 0x0000ff});var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.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() {//辅助三维坐标系AxisHelpervar 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，rendervar loop=function() {requestAnimationFrame(loop);//请求再次执行渲染函数render，渲染下一帧update();render();}loop();//循环开始
</script>
</body>
</html>

three.js模板相关推荐

js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
四、Vue.js 模板语法
本章概要应用程序实例插值指令 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将呈现的 DOM 绑定至底层组件实例的数据.所有的 Vue.js 模板都是有效的 HTML ,可以 ...
JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
(js)模板字符串中使用循环遍历数据：
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...
js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...

three.js模板

three.js模板

three.js模板相关推荐

最新文章

热门文章