从Unity到Three.js(计时器、Transform)

计时器、模型对象平移函数、枚举定义的使用

对应unity中的一些常用功能

javascript 复制代码
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, 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 = 50;

//枚举定义
const direction = {
    UP: '上',
    DOWN: '下',
    LEFT: '左',
    RIGHT: '右'
};

let state;
function changeState(dir) {
    console.log("dir=" + dir);
    if (state != dir) {
        state = dir;
    }
}

//计时器
const clock = new THREE.Clock();
let timer = 0;
//枚举索引,不会js的int转枚举语法
let stateIndex = 1;
function updateChangeState() {
    timer += clock.getDelta();
    if (timer >= 3) {
        timer = 0;
        stateIndex++;
        if (stateIndex == 5) {
            stateIndex = 1;
        }
        changeState(convertToEnum(stateIndex));
    }
}

//自定义int转枚举方法
function convertToEnum(value) {
    switch (value) {
        case 1:
            return direction.UP;
        case 2:
            return direction.LEFT;
        case 3:
            return direction.DOWN;
        case 4:
            return direction.RIGHT;
    }
}

//更新模型位置
function updateSetObjPosition() {
    switch (state) {
        case direction.UP:
            cube.translateY(0.1);
            break;
        case direction.DOWN:
            cube.translateY(-0.1);
            break;
        case direction.LEFT:
            cube.translateX(-0.1);
            break;
        case direction.RIGHT:
            cube.translateX(0.1);
            break;
    }
}

function animate() {
    requestAnimationFrame(animate);

    updateChangeState();
    updateSetObjPosition();

    renderer.render(scene, camera);
}

animate();
相关推荐
刘发财4 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
梦想平凡5 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
kyriewen9 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
mONESY11 小时前
LangGraph.js 从零上手:把 Agent 工作流从一条线变成一张网
javascript
默_笙11 小时前
⚓ AI 的"官方答题卡":withStructuredOutput 与结构化输出的终局之战
前端·javascript
小小数媒成员11 小时前
如何优化代码适应托管内存?
游戏·unity·游戏引擎
我家猫叫佩奇12 小时前
🦭 厌倦了千篇一律的线性图标?Naive Icons 正式开源
前端·javascript·css
梦诺14 小时前
vue3 keepAlive+记录滚动条
前端·javascript·vue.js
天若有情67315 小时前
开源轻量双语工具|一键批量查询 NPM 包历史下载量,支持按作者批量统计
javascript·npm·github pages·开源工具·netlify·前端开源·npm克隆量
福兮说17 小时前
纯前端把图片压缩到指定体积:canvas.toBlob 配合二分查找
前端·javascript·canvas·图片处理