前言

该文章仅是个人用来记录自己学习Three.js的一些代码以及过程与个人的理解，有不对的大佬勿喷，随便看看就好，不参与讨论。

1. 基本概念

基本的搭建过程得有一个（场景、相机、物体），最后通过一个渲染器，把这些东西给渲染出来。

场景搭建

// 1、创建场景
const scene = new THREE.Scene();

2.创建相机

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000)

相机创建完毕后，要设置相机的位置，并放入到场景中

// 设置相机位置
camera.position.set(10, 10, 10)
// 添加相机到场景
scene.add(camera)

3.初始化物体，并添加到物体里

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 初始化物体材质
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
// 创建物体
const cube = new THREE.Mesh( geometry, material );
// 添加到场景
scene.add( cube );

4.场景，相机，物体都搭建好了，接下来是创建一个渲染器，并封装一个渲染函数，使其每帧进行一个重新渲染。

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 将渲染器canvas添加到body中
document.body.appendChild(renderer.domElement)

// 一进来就渲染
render()

// 设置渲染函数
function render(time) {
   // 根据动画帧来进行位移
   let t = (time / 1000) % 5
   console.log(t);
   cube.position.x = t * 1

   if(cube.position.x > 5) {
      cube.position.x = 0
   }

   // 渲染
   renderer.render(scene, camera)
   // 下一帧重新渲染
   requestAnimationFrame(render)
}

5.还可以通过一些辅助设置，来更清晰的去从不同角度观看场景，例如添加一个轨道控制器，三维坐标轴

// 创建轨道控制器，相机+渲染器
const controls = new OrbitControls(camera, renderer.domElement)

// 添加三维坐标轴、红色x、绿色y、蓝色z
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

记录学习Three.js过程（一）

前言

1. 基本概念