three.js 前端基础入门

我介绍一下three.js 的入门

我直接使用 and-design-vue 来演示入门

1.安装 three

 npm install --save three

2.引入three

import * as THREE from 'three';

3.流程

我来粘贴一段代码


  var scene = new THREE.Scene()
  var camera = new THERE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 5


  var renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)



  // 光源
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 60, -10);
  scene.add(spotLight);
  // 光源 end

  var gemoetry = new THREE.BoxGeometry(1, 1, 1)
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

  var cube = new THREE.Mesh(gemoetry, material)

  scene.add(cube)


  // 动画
  function animate() {

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);

    requestAnimationFrame(animate);
  }
  animate();

以上代码我一段一段来解释

① 创建场景和相机

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5

②渲染器

var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

③物体

var gemoetry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
var cube = new THREE.Mesh(gemoetry, material)
scene.add(cube)

④ 渲染

 renderer.render(scene, camera);

动画渲染

function animate() {

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);

    requestAnimationFrame(animate);
  }
  animate()

就出现了一个会动的正方体

就是目前开发three,js 都是要从这几部开始的

创建场景

物体

渲染器

至于逻辑复杂那是逻辑问题

three.js 前端基础入门

悦读