webgl+three.js,学习笔记,画一个立方体+解析
2017-08-28 15:04
821 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>物体</title> <script src="js/Three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({antialias : true});//建立渲染器对象 renderer.setSize(width, height);//设置渲染器大小,即可视区域大小 document.getElementById('canvas-frame').appendChild(renderer.domElement);//建立容器对象,并讲渲染器附在所建立的容器里 renderer.setClearColor(0xFFFFFF, 1.0);//设置背景色及其透明度 4000 } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//创建透视投影相机,还有正投影相机OrthographicCamera //第一个参数表示视角(从下到上的观察角度)取值为0-180之间; //第二个参数表示宽高比; //地三四个参数表示最近可是距离和最远可是距离。 camera.position.z = 1000;//相机的位置,有x,y,z的三个属性。 } var scene; function initScene() { scene = new THREE.Scene();//构建场景,场景只有一个 } var light; function initLight() { light = new THREE.PointLight(0xFFFFFF);//创建白色的点光源 light.position.set(100, 200,300);//光源位置 scene.add(light);//将光源加入到场景中 } var mesh; function initObject() { var geometry = new THREE.CubeGeometry( 200,200,200);//物体,CubeGeometry创建的是立方体 var material = new THREE.MeshLambertMaterial( { color:0x666666} );//材质 mesh = new THREE.Mesh( geometry,material);//mesh对象由物体和材质组成 mesh.rotation.x = Math.PI / 5;//给物体换个角度,否则是正视图,看到的就是一个正方形了 mesh.rotation.y = Math.PI / 5; scene.add(mesh);//将mesh加入到场景中 } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.render(scene, camera);//渲染 } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
相关文章推荐
- 小八——WebGL心路历程(2),一个基于Three.js的webGL程序解析
- 学习笔记Webgl之Three.js (1)
- webgl+three.js,学习笔记,调用摄像头,做成纹理
- Three.JS-学习 The WebGL earth (1)---globe.html 分析
- Node.js 学习笔记--- (2)创建一个简单的博客工程
- webgl学习笔记1--如何绘制一个基本图形
- Android 个人学习笔记之---SAX解析XML文件(有一个坑爹的问题)
- THREE.js 学习笔记(一)
- DirectX11 学习笔记3 - 创建一个立方体 和 轴
- three.js学习笔记 光和影
- Three.js学习笔记——3dsmax 加载obj模型
- three.js学习笔记 太阳眩光
- sandy引擎学习笔记: 创建一个立方体
- WebGL之ThreeJS学习之旅01
- three.js 学习笔记之 混乱的矩阵
- THREE.js 学习笔记(一)
- THREE.js 学习笔记(前记)
- Web Service学习笔记:创建一个示例和WebMethod特性解析
- android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据
- node.js 学习笔记一:创建一个服务器