学习threeJS(一)--第一个threeJs

时间 2019-11-29

标签学习 threejs 第一个繁體版

原文原文链接

参考：threeJS开发指南javascript

threeJs三个基本要素html

一、scene：一个容器，保存并跟踪咱们想渲染的物体java

二、camera：定义在scene里能看到什么jquery

三、rederer：计算指定camera角度下scene的样子--使用什么方式渲染（常见利用显卡渲染）app

html：引入jQuery-1.9.0、threeJSdom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加光源</title>
  <style>
      body {
          margin: 0;
          overflow: hidden;
      }
  <style/>
</head>
<body>
<div id="WebGl-output"></div>
<script type="text/javascript" src="../../build/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

js:ui

一、要初始化三要素scene、camera、rederercode

// 定义scene,camera,renderer
// scene是一个容器，保存并跟踪咱们想渲染的物体
var scene = new THREE.Scene();
// 定义在scene里能看到什么
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000);
// 计算指定camera角度下scene的样子--使用显卡渲染
var renderer = new THREE.WebGLRenderer();
// 背景颜色
renderer.setClearColorHex(0xEEEEEE);
// 背景大小
renderer.setSize(window.innerWidth, window.innerHeight);

二、添加坐标轴htm

// 建立坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);

三、添加一个灰色的平面blog

// 建立平面
// 定义平面尺寸 -- 宽60，高20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 颜色
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
// 合并尺寸和颜色
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 定义位置
// 绕着x轴旋转90度
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

四、添加一个正方体

// 建立方块
  var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
  var cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = -4;
  cube.position.y = 3;
  cube.position.z = 0;
  scene.add(cube);

五、添加一个球体

// 建立球体
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x7777ff,
    wireframe: true
  });
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 20;
  sphere.position.y = 4;
  sphere.position.z = 2;
  scene.add(sphere);

六、指定相机的位置和悬挂的角度

// 指定相机的位置，将其悬挂在场景上方
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  // 指向场景中心
  camera.lookAt(scene.position);

七、讲scene和camera挂载到html

// 挂载到html上
  $("#WebGl-output").append(renderer.domElement);
  renderer.render(scene, camera);

结果如图