three.js学习(1):

1.three.js是:
three.js是用JavaScript编写的WebGL第三方库。官网(www.threejs.org)
2.three.js功能:
three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。
3.three.js用法
(1)导入three.js;
(2)创建场景Scene及设置;
(3)创建相机Camera及设置;
(4)创建渲染器Renderer;
(5)创建模型或导入模型,设置材质等;
(6)添加模型到场景中;
(7)设置灯光等;
(8)添加动画等;
(9)渲染场景;
官方实例

<html>
 <head>
  <title>My First three.js app</title>
        <script src="js/three.js"></script>
  <style>
   body{margin:0;}
   canvas{width:100%;height:100%;}
  </style>
 </head>
 <body>
 <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);
  var geometry = new THREE.BoxGeometry(1,1,1);
  var material = new THREE.MeshBasicMaterial({color:0x00ff00});
  var cube = new THREE.Mesh(geometry,material);
  scene.add(cube);
  camera.position.z = 5;
  var animate = function(){
   requestAnimationFrame(animate);
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
   renderer.render(scene,camera);
  };
  animate();
 </script>
 </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_31976161/article/details/84061626