脚本开发

创建日期:2024-11-30
更新日期:2024-12-01

编辑器仅支持JavaScript脚本,可以在右侧边栏脚本选项卡新建脚本。

脚本选项卡

1.png

点击右侧边栏脚本选项卡,可以新建、编辑、删除脚本。

\\新建脚本:新建一个Javascript脚本。

新建文件夹:新建一个文件夹。在脚本树状图上,可以将脚本和文件夹拖动到文件夹上,调整脚本的顺序和层次结构。

编辑:选中脚本和文件夹,可以对脚本和文件夹重命名。

删除:删除一个脚本或文件夹。

编辑脚本:打开Javascript编辑器,编辑代码。

脚本框架

新建脚本,会自动打开代码编辑器,自动生成以下代码。

// var app: Player
// var scene: THREE.Scene
// var camera: THREE.PerspectiveCamera
// var renderer: THREE.WebGLRenderer
// 场景渲染前执行一次
function init() {
}

// 场景渲染后执行一次
function start() {
}

// 程序运行过程中,每帧都要执行
function update(clock, deltaTime) {
}

// 程序结束运行后执行一次
function stop() {
}

// 监听鼠标点击事件
function onClick(event) {
}

// 监听鼠标双击事件
function onDblClick(event) {
}

// 监听键盘按下事件
function onKeyDown(event) {
}

// 监听键盘抬起事件
function onKeyUp(event) {
}

// 监听鼠标按下事件
function onMouseDown(event) {
}

// 监听鼠标移动事件
function onMouseMove(event) {
}

// 监听鼠标抬起事件
function onMouseUp(event) {
}

// 监听鼠标滚轮事件
function onMouseWheel(event) {
}

// 监听touchstart事件
function onTouchStart(event) {
}

// 监听touchend事件
function onTouchEnd(event) {
}

// 监听touchmove事件
function onTouchMove(event) {
}

// 监听屏幕大小改变事件
function onResize(event) {
}

// 监听VR connected事件
function onVRConnected(event) {
}

// 监听VR disconnected事件
function onVRDisconnected(event) {
}

// 监听VR selectstart事件
function onVRSelectStart(event) {
}

// 监听VR selectend事件
function onVRSelectEnd(event) {
}

这是编辑器自动生成的脚本框架,场景播放时会自动调用这些函数。如果不需要某些函数,可以删除。

全局变量

脚本中除提供了window对象上的全局变量外(例如:Date、JSON、THREE等),还提供了播放器相关变量。

app:播放器应用实例(不是编辑器应用实例),对应src/player/Player.ts。

scene:场景实例,是THREE.Scene类型。

camera:相机实例,是THREE.PerspectiveCamera类型。

renderer:渲染器实例,是THREE.WebGLRenderer类型。

常用脚本

1、获取场景中的物体。

通过scene.getObjectByName(name)可以获取场景中的物体。其中,name是物体名称,可以在属性面板基本信息组件中修改。

示例代码:该代码获取场景中名称为正方体的物体,并让它绕x轴进行旋转。

var box;

// 场景渲染后执行一次
function start() {
    box = scene.getObjectByName('正方体');
}

// 程序运行过程中,每帧都要执行
function update(clock, deltaTime) {
    box.rotation.x += 0.01;
}

2、处理点击事件。

通过在脚本中实现onClick或onMouseDown函数,可以实现物体选中功能。

示例代码:该代码实现了鼠标选中场景中物体的功能。当点击场景中名称为正方体的物体时,该物体会变成红色。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseDown(event) {
    mouse.x = (event.offsetX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(event.offsetY / renderer.domElement.height) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children);
    const intersect = intersects.find(n => n.object.name === '正方体')
    if (intersect) {
        intersect.object.material.color.set(0xff0000);
    }
}