Three.js-硬要自学系列1(创建我的第一个3D场景)

我在网上找了很多关于three.js的教程，越看是越迷茫，很多写的篇幅很长，理论性太强，不符合我的气质，也不是我想要的那种，我希望有这么样一个教程，道理不用讲太多，直接告诉我怎么做，先让我用最快的速度上手（浮躁），即使做出来的是一堆狗屎~那也无所谓，因为在Three.js的世界里，可玩的东西那是太多了，既然找不到想要的，那就子给自足，自力更生吧，反正这个门我是一定要入的~~~

撸起袖子搞起来

这里我使用vue3进行学习和案例的开发，至于环境搭建问题，请自行百度，这里就不赘述了

1.搭棚子远比盖房子要重要得多

工欲善其事必先利其器

浏览器：请掏出你的Chrome或者Edge浏览器，IE老爷爷早就退休了
编码工具：你可以选择webstorm，但我选择vscode，搭配Live Server插件别提有多香

在Vue中导入three.js

按需导入

js 复制代码

import {Scene, Mesh, WebGLRenderer } from 'three';

完整导入

js 复制代码

import * as THREE from 'three';

3D世界中的三巨头

1.场景(Scene) ： 3D世界的万能收纳盒，连你家猫主子都能塞进去

js 复制代码

const scene = new THREE.Scene();

2.相机(Camera): 建议使用透视相机,毕竟大家都希望更真实点

js 复制代码

const camera = new THREE.PerspectiveCamera(
  75, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面 相机最近能看到的距离
  1000, // 远裁剪面 相机最远能看到的距离
);

3.渲染器(Renderer): 3D世界的粉刷匠，没有它你啥也看不到

js 复制代码

const renderer = new THREE.WebGLRenderer();
// 设置画布大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 插入画布
document.body.appendChild( renderer.domElement )

这里要解释下renderer.setSize设置画布大小为视口大小，然后将画布插入到的body下，当然你可以插入到任意DOM Element下

2.世界里不能总是空荡荡的

添加一些物体

js 复制代码

const geometry = new THREE.BoxGeometry(1,1,1);
// 基础材质
const material = new THREE.MeshBasicMaterial({color: 'deepskyblue'});
// 网格模型
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0,0,0);  // 设置模型位置
scene.add(cube); // 将模型添加至场景中

啊哈，我创建了一个立方体它是天空蓝，记住它被放置在了坐标原点，scene.add很重要

世界是运动的

js 复制代码

function animation() {
    // 旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染场景和相机
    renderer.render( scene, camera );
    requestAnimationFrame( animation );
}
animation()

调用animation方法后，浏览器中可以看到一个旋转着的立方体，就是这么简单，我的第一个3D场景就这么完成了

效果图

完整代码

js 复制代码

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

  //2.创建相机////////////// 
  const camera = new THREE.PerspectiveCamera(
      75, // 视角
      window.innerWidth / window.innerHeight, // 宽高比
      0.1, // 近裁剪面 相机最近能看到的距离
      1000, // 远裁剪面 相机最远能看到的距离
  );
  // 设置相机位置
  camera.position.z = 5;
  camera.position.x = 4;
  camera.position.y = 2;
  camera.lookAt(0,0,0);  // 设置相机观察目标点

  //3.添加渲染器////////////// 
  const renderer = new THREE.WebGLRenderer();
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 插入画布
  document.body.appendChild( renderer.domElement )


  // 创建几何体
  const geometry = new THREE.BoxGeometry(1,1,1);
  // 基础材质
  const material = new THREE.MeshBasicMaterial({color: 'deepskyblue'});
  // 网格模型
  const cube = new THREE.Mesh( geometry, material );
  cube.position.set(0,0,0);  // 设置模型位置
  scene.add(cube); // 将模型添加至场景中


  // 循环渲染
  function animation() {
    // 旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染场景和相机
    renderer.render( scene, camera );
    requestAnimationFrame( animation );
  }
  animation()

这算是一个基本的模板，很重要，在后面的学习中会频繁使用到