用three.js绘制一个坐标系
Posted 长大当个科学家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用three.js绘制一个坐标系相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../js/three.js"></script> </head> <body onload="main()"> <script> function initTHREE(){ width = window.innerWidth; height = window.innerHeight; renderer = new THREE.WebGLRenderer({ antialias:true //是否为抗锯齿 }); renderer.setSize(width,height); renderer.setClearColor(0xFFFFFF,1.0); document.body.appendChild(renderer.domElement); } function initCamera(){ camera = new THREE.PerspectiveCamera(45,width/height,1,1000); camera.position.z = 15; camera.position.x = 3;//将相机的位置往右边挪5个单位 } function initScene(){ scene = new THREE.Scene(); } function initGeometry(){ var geometry = new THREE.CubeGeometry(2,2,2); var materail = new THREE.MeshBasicMaterial({color:0xff0000}); cube = new THREE.Mesh(geometry,materail); //在网页上显示坐标系，其中坐标系的长度为6 var axisHelper =new THREE.AxisHelper(6); /* scene.add(cube);*/ //------- //将坐标系加入到场景中 |--->这个两个注释掉的主要原因是因为下面要演示将坐标系和我们的几何体绑定的例子 /*scene.add(axisHelper);*/ //------- var object = new THREE.Object3D();//声明一个3d对象 object.add(axisHelper); //将坐标系加入到对象中 object.add(cube); //将几何实体加入到对象中 //得到一个绑定了实体和坐标系的对象，然后将它加入到场景当中 scene.add(object); } function main(){ initTHREE(); initCamera(); initScene(); initGeometry(); render(); } function render(){ requestAnimationFrame(render); cube.rotation.y += 0.01;//0.01是弧度值 renderer.render(scene,camera); } </script> </body> </html>
以上是关于用three.js绘制一个坐标系的主要内容，如果未能解决你的问题，请参考以下文章