Three.js开发笔记——场景初探

2019-04-22 本文已影响0人 JayneJing

Three.js 是一款运行在浏览器中的 3D 引擎，我们可以用它在 web 中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解 webgl 的世界。

一、搭建HTML框架，导入libs

<!DOCTYPE html>
<html>
<head>
  <title>Example 01.01 - Basic skeleton</title>
  <script type="text/javascript" src="./libs/three.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="WebGL-output"></div>

<script type="text/javascript">
  
  function init() {

  }
  window.onload = init

</script>
</body>
</html>

二、Three.js三要素

1、场景（Scene）

场景（Scene）是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
一个场景想要显示任何东西，必须要添加摄像机（Camera）、光源和对象。这将在第三部分进行介绍。
下面来添加一个场景（Scene）

var scene = new THREE.Scene();

2、摄像机（Camera）

摄像机（Camera）决定了能够在场景中看到什么
下面来定义一个摄像机（Camera）及其坐标

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 30;
camera.position.y = 20;
camera.position.z = 40;
camera.lookAt(scene.position);

其中用到了PerspectiveCamera(fov, aspect, near, far)

fov 可视角度
aspect 为width/height,通常设置为canvas元素的高宽比。
near近端距离
far远端距离
只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。

3、渲染器（renderer）

顾名思义，渲染器（renderer）是将观察到的场景渲染到浏览器中。
下面来定义一个渲染器（renderer），并设置它的背景色和尺寸大小

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);

三、为场景添加元素

1、添加光源

这里添加一个点光源

var spotLight = new THREE.SpotLight(0xffffff); //定义一个点光源，并设置颜色
spotLight.position.set(40, 60, 40); //设置点光源坐标
spotLight.castShadow = true;
scene.add(spotLight);

2、添加一个辅助坐标轴

var axes = new THREE.AxisHelper(20);
scene.add(axes);

3、添加一个物体

这里添加一个使用MeshLambertMaterial材质的长方体

var sphereGeometry = new THREE.SphereGeometry(6, 4, 4); // 创建一个长方体
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});// 创建一个材质
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 构造一个球体并附着材质
sphere.position.x = 0; //设置球体的x轴坐标
sphere.position.y = 4; //设置球体的x轴坐标
sphere.position.z = 0; //设置球体的x轴坐标
scene.add(sphere);

4、添加一个辅助平面（可选）

var planeGeometry = new THREE.PlaneGeometry(40, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

四、输出

接下来使用渲染器来输出建模结果

document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);

可以看到我们的建模结果如图所示

Github链接：https://github.com/JayneJing/ThreeJs-test/blob/master/threejs-1.html

参考资料：《Three.js开发指南》