學習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);

結果如圖

相關標籤/搜索

webpack+typescript+threejs+vscode

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。