学习Three.js（一）创建项目

创建项目

项目初始化

npm init

安装three.js ， gsap(动画库)，dat.gui

npm install three gsap dat.gui

安装parcel

npm install -g parcel-bundler

接着，通过修改你的package.json来添加这些任务脚本

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

运行

npm run dev

在入口文件引入three.js及其他

import  * as THREE from 'three';
//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
//导入动画库
import gsap from 'gsap'
//导入dat.ui
import * as dat from 'dat.gui'

创建3D场景

//创建3D场景对象Scene
const scene = new THREE.Scene();
//创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000)
//设置相机位置
camera.position.set(0, 0, 10);
//把相机添加到场景
scene.add(camera);
//创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建物体材质
const materail = new THREE.MeshBasicMaterial({color: 'red'})
//创建构造器
const cube = new THREE.Mesh(geometry,materail)
//把物体添加到场景
scene.add(cube)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
//把渲染器dom添加到HTML文档中
document.body.appendChild(renderer.domElement)
//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

//设置控制器阻尼感，有真实效果，必须在动画循环调用update()
controls.enableDamping=true;
//添加辅助观察坐标系，THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。
const axesHelper = new THREE.AxesHelper( 5 );
//添加到场景中
scene.add( axesHelper );
//定义渲染方法
function render(time){
//更新控制器
controls.update()
//渲染场景
renderer.render( scene, camera );
//请求动画帧渲染循环
requestAnimationFrame(render)
}
//执行渲染函数
render() 

透视相机说明