美文网首页
使用three.js的基本组件

使用three.js的基本组件

作者: suzixuan | 来源:发表于2018-10-14 23:36 被阅读0次

创建一个简单的入门案例

three.js的三大场景:场景(scene)、相机(camera)和渲染器(renderer),包含了这些就可以将物体渲染到网页中去了,下面我们来做一个小案例感受一下。

1.首先,我们需要设置一个容器来接纳这些物体:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用构建Three.js场景的基本组件</title>
    <script type="text/javascript" src="../js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../js/three.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>
</body>
</html>

2.创建一个平面试试:

// 创建场景
  var scene = new THREE.Scene();
  // 创建透明相机
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  // 将相机添加到场景中
  scene.add(camera);
  // 创建WebGL渲染器
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0xEEEEEE, 0.1));
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 创建平面
  var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
  var planeMaterail = new THREE.MeshLambertMaterial({
    color: 0xffffff
  });
  var plane = new THREE.Mesh(planeGeometry, planeMaterail);

  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  scene.add(plane);
  // 设置照相机的位置
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  // 设置环境光
  var ambientLight = new THREE.AmbientLight(0x0c0c0c);
  scene.add(ambientLight);

  // 创建立方体
  var cubeGeometry = new THREE.CubeGeometry(4, 4, 4, 4);
  var cubeMaterial = new THREE.MeshLambertMaterial({
    color: Math.random() * 0xffffff
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  cube.position.x = 0;
  cube.position.y = 0;
  cube.position.z = 0;

  scene.add(cube);
  
  // 将渲染器的dom添加到webGL后
  $("#WebGL-output").append(renderer.domElement);
  // 渲染
  renderer.render(scene, camera);

效果如下:


new-plane.png

可以看到平面场景中一片漆黑,添加的立方体并没有显示出来,因此我们需要添加聚光灯光源,添加代码如下:

 // 设置聚光灯光源
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 60, 30);
  scene.add(spotLight);

效果如下:


new-cube.png

3.添加阴影

  <script type="text/javascript" src="../js/stats.min.js"></script>
// 创建场景
  var scene = new THREE.Scene();
  // 创建透明相机
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  // 将相机添加到场景中
  scene.add(camera);
  // 创建WebGL渲染器
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0xEEEEEE, 0.1));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMapEnabled = true;
  // 创建平面
  var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
  var planeMaterail = new THREE.MeshLambertMaterial({
    color: 0xffffff
  });
  var plane = new THREE.Mesh(planeGeometry, planeMaterail);
  plane.receiveShadow = true;

  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0;
  plane.position.y = 0;
  plane.position.z = 0;

  scene.add(plane);
  // 设置照相机的位置
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  // 设置环境光
  var ambientLight = new THREE.AmbientLight(0x0c0c0c);
  scene.add(ambientLight);

  // 设置聚光灯光源
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 60, -30);
  spotLight.castShadow = true;
  scene.add(spotLight);

  // 创建立方体
  var cubeGeometry = new THREE.CubeGeometry(4, 4, 4, 4);
  var cubeMaterial = new THREE.MeshLambertMaterial({
    color: Math.random() * 0xffffff
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  cube.position.x = 0;
  cube.position.y = 0;
  cube.position.z = 0;
  cube.castShadow = true;

  scene.add(cube);

  // 将渲染器的dom添加到webGL后
  $("#WebGL-output").append(renderer.domElement);
  // 渲染
  renderer.render(scene, camera);

效果如下:


cube-shadow.png

4.添加统计对象,修改渲染方法,引入requestAnimationFrame()方法(可以解决setInterval()函数问题):

  // 初始化统计对象
  function initStats() {
    var stats = new Stats();
    // 监测FPS
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0';
    stats.domElement.style.top = '0';
    $("#Stats-output").append(stats.domElement);
    return stats;
  }
  var stats = initStats();
  // 渲染
  function render() {
    stats.update();
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();

5.让立方体旋转起来

  cube.position.x = 0;
  cube.position.y = 5;
  cube.position.z = 0;
  cube.castShadow = true;
  function render() {
    stats.update();
    cube.rotation.x += 0.02;
    cube.rotation.y += 0.02;
    cube.rotation.z += 0.02;
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();

效果如下:


cube-rotation.gif

相关文章

网友评论

      本文标题:使用three.js的基本组件

      本文链接:https://www.haomeiwen.com/subject/bpktzftx.html