threejs 绘制第一个3维场景

threejs下载地址： github threejs

threejs 文档 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

 

      //创建场景对象
          var scene = new THREE.Scene();
      //创建一个立方体几何对象
      var box = new THREE.BoxGeometry(100, 100, 100);
      //材质对象
      var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff,
        opacity: 0.5,
        transparent: true
        });
      //网格模型对象
      var mesh = new THREE.Mesh(box, material);
      //网格模型添加到场景中
      scene.add(mesh);
        
       //创建一个球体几何对象
      var sphere = new THREE.SphereGeometry(40, 40, 40);
      //材质对象
      var sphereMaterial = new THREE.MeshPhongMaterial({
        color: 0x00ffff, //  材质颜色
        specular: 0x4488ee, // 高光颜色
        shininess: 12, // 光照强度系数
        opacity: 0.5, // 材质透明度
        transparent: true // 开启材质透明度
        });
      //网格模型对象
      var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
      sphereMesh.translateX(100);
      scene.add(sphereMesh);

      //点光源
      var point = new THREE.PointLight(0xffffff);
      //点光源位置
      point.position.set(400, 200, 300);
      //点光源添加到场景中
      scene.add(point);

      //环境光
      var ambient=new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      var width = window.innerWidth;
      var height = window.innerHeight;
      //窗口宽高比
      var k = width / height;
      //三维场景缩放系数
      var s = 150;
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      //设置相机位置
      camera.position.set(200, 300, 200);
      //设置相机方向(指向的场景对象)
      camera.lookAt(scene.position);
      
      // 创建渲染器对象
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      //设置背景颜色
      renderer.setClearColor(0xb9d3ff, 1);
      console.log(renderer.domElement);
      document.body.appendChild(renderer.domElement);
      //执行渲染操作
      //renderer.render(scene, camera);
      let t0 = new Date(); //上次时间
      function render() {
        let t1 = new Date(); //本次时间
        let t = t1 - t0; // 时间差
        requestAnimationFrame(render);//请求再次执行渲染函数render
        renderer.render(scene, camera);
        mesh.rotateY(0.01 * t); //立方体每次绕y轴旋转0.01弧度
      }
      render();

学习地址： http://www.yanhuangxueyuan.com/Three.js_course.html