使用Parcel搭建开发环境

npm init -y
npm install parcel-bundler --save-dev
npm install three

// 修改package.json
"scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
}

npm run dev

渲染第一个场景和物体

import * as THREE from 'three';

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

// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

// 创建并添加渲染器
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: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}
animate();

轨道控制器查看物体

import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

const controls = new OrbitControls( camera, renderer.domElement );
camera.position.set( 0, 0, 5 );
// 设置阻尼
controls.enableDamping = true
controls.update();

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

添加坐标轴辅助器查看物体

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper);

物体移动、缩放、旋转

// 移动
cube.position.x += 0.05
if (cube.position.x > 5) {
    cube.position.x = 0
}

// 缩放
cube.scale.x = 2
cube.scale.y = 3
cube.scale.z = 1

// 旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

Gsap动画库的使用

npm install gsap

import { gsap } from "gsap";

let ani = gsap.to(cube.position, {
    x: 5,
    duration: 2,
    ease: "power2.out ",
    yoyo: true,
    repeat: -1,
    delay: 2,
    onComplete: () => {},
    onStart: () => {},
})

window.addEventListener("dblclick", () => {
    if(ani.isActive()) {
        ani.pause()
    } else {
        ani.resume()
    }
})

屏幕自适应

window.addEventListener("resize", () => {
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight
    // 跟新投影矩阵
    camera.updateProjectionMatrix()
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 设置渲染器像素比
    renderer.setPixelRatio(window.devicePixelRatio)
})

全屏和退出全屏

window.addEventListener("dblclick", () => {
    const isFullScreen = document.fullscreenElement

    if (isFullScreen) {
        document.exitFullscreen()
    } else {
        renderer.domElement.requestFullscreen()
    }
})

dat.gui图形界面变量调试

npm install dat.gui

import * as dat from 'dat.gui';

const gui = new dat.GUI(); 

gui.add(cube.position, "x").min(0).max(5).step(0.01).name("x轴坐标").onChange(value => {
    console.log("值被修改了" + value)
}).onFinishChange(value => {
    console.log("完全停下来触发" + value);
})

const params = {
    color: "#ffff00",
    fn: () => {
        gsap.to(cube.position, {
            x: 5,
            duration: 2,
            yoyo: true,
            repeat: -1
        })
    }
}

gui.addColor(params, "color").onChange(value => {
    cube.material.color.set(value)
})

gui.add(cube, "visible").name("是否显示")

gui.add(params, "fn").name("点击开始运动")

let folder = gui.addFolder("设置立方体")
folder.add(cube.material, "wireframe")