# 低代码文档

# 一.添加

# 1.加载yyds文件

<!DOCTYPE html>
<html lang="zh" style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta charset="UTF-8">
    <title>YThreeJS</title>
</head>
<body style="width: 100vw;height: inherit;overflow: hidden;margin: 0">
<div id="show" style="width:100%;height: inherit;"></div>
</body>
<script type="text/javascript" src="https://ythree-1257293276.cos.ap-nanjing.myqcloud.com/file/YThreeJS.js"
        charset="utf-8"></script>
<script type="module">
    //初始对象
    let a = new YThreeJs({
        container: document.getElementById("show") //用于放置画布
    });
    //加载模型
    a.add_model("scene.yyds", (onLoad) => {
        //显示模型
        onLoad.set_show();
        //使用模型带的背景
        onLoad.set_background_initial();
        //使用模型带的环境
        onLoad.set_environment_initial();
        //使用模型带的渲染器配置
        onLoad.set_renderer_initial();
        //使用模型带的界面
        onLoad.set_interfaces_initial();
        //使用模型带的相机和控制器配置
        onLoad.set_camera_initial();
        //激活模型带的脚本
        onLoad.lib_scripts_activation();
    }, (onProgress) => {
        //正在加载的进度百分比
        console.log(onProgress)
    }, (onError) => {
        //加载报错原因
        console.log(onError)
    });
</script>

</html>

# 2.添加模型点击事件

YThreeJs.add_click_name("模型的名称",(e)=>{console.log(e)})

# 3.添加键盘按键监听

YThreeJs.add_keydown("按键名称",(e)=>{console.log(e)})
YThreeJs.add_keyup("按键名称",(e)=>{console.log(e)})

# 4.添加环境光

YThreeJs.add_AmbientLight()

# 二.设置

# 1.设置背景

YThreeJs.set_background("url",["720","Color"])

# 2.设置环境

YThreeJs.set_environment("url",["720","ModelViewer"])

# 3.设置相机位置

YThreeJs.set_camera_position([10,10,10])

# 4.设置控制器禁用

YThreeJs.set_prohibit_drag()

# 5.设置控制器平移

YThreeJs.set_controls_pan_no()
YThreeJs.set_controls_pan_yes()

# 6.设置控制器开关

YThreeJs.set_controls_zoom_no()
YThreeJs.set_controls_zoom_yes()

# 三.获取

# 1.获取点击记录

console.log(YThreeJs.get_click_log())

# 2.获取模型对象

console.log(YThreeJs.get_model_name(“模型名称”))

# 3.获取所有模型名称

console.log(YThreeJs.get_all_name())

# 4.获取双击记录

console.log(YThreeJs.get_dblclick_log())

# 5.获取当前控制器的中心

console.log(YThreeJs.get_controls_target())

# 6.获取相机的位置

console.log(YThreeJs.get_camera_position())

# 四.删除

# 1.删除点击记录

YThreeJs.del_click_log()

# 2.删除双击记录

YThreeJs.del_dblclick_log()

# 五.扩展

# 1.拖拽

//初始化
YThreeJs.lib_drag_initial()
//开启
YThreeJs.lib_drag_open()
//暂停
YThreeJs.lib_drag_suspend()
//关闭
YThreeJs.lib_drag_close()
//开始拖拽
YThreeJs.lib_drag_start((e)=>{console.log(e)})
//拖拽中
YThreeJs.lib_drag_move((e)=>{console.log(e)})
//拖拽结束
YThreeJs.lib_drag_end((e)=>{console.log(e)})
//恢复拖拽前的样子
YThreeJs.lib_drag_restore()

# 模型对象

# 一、添加

# 1.新增单击监听

Model.add_click((e)=>{console.log(e)},[true,false])

# 2.新增双击监听

Model.add_dblclick((e)=>{console.log(e)},[true,false])

# 3.新增鼠标移入监听

Model.add_enter((e)=>{console.log(e)},[true,false])

# 4.新增鼠标移出监听

Model.add_exit((e)=>{console.log(e)},[true,false])

# 5.将自身模型添加到其他模型子集

Model.add_model(Model)

# 二、设置

# 1.设置缩放

Model.set_scale([1,1,1])

# 2.设置位置

Model.set_position([0,0,0])

# 3.设置模型显示

Model.set_show()

# 4.设置模型组内唯一显示

Model.set_show_gr1()

# 5.设置模型隐藏

Model.set_hide()

# 6.设置模型标记发光

Model.set_mark_luminescence_true()
Model.set_mark_luminescence_false()

# 7.设置模型发光

Model.set_box_reflection()

# 8.设置模型DOM联动

Model.set_dom(DOM)

# 三、获取

# 1.获取父级

console.log(Model.get_parent())

# 2.获取模型当前相对位置

console.log(Model.get_position())

# 3.获取模型当前世界位置

console.log(Model.get_position_world())

# 4.获取所有子集

console.log(Model.get_son())

# 5.获取树结构

console.log(Model.get_tree())

# 6.获取模型动画列表

console.log(Model.get_animation())

# 7.根据名称获取模型

console.log(Model.get_model_name(“name”))

# 8.获取克隆

console.log(Model.get_clone())

# 9.获取显示状态

console.log(Model.get_show())

# 10.获取屏幕位置

console.log(Model.get_screen_position())

# 四、扩展

# 1.脚本激活

Model.lib_scripts_activation()

# 动画对象

//播放
Animation.play((e)=>{console.log(e)})
//停止
Animation.stop()
//设置播放速度
Animation.set_timeScale(timeScale)

# 嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>嵌套演示</title>
</head>
<body style="margin: 0;overflow: hidden;">
<iframe id="edit" src="https://super.lhy321.cn/YThreeJsEdit#/edit" style="width: 100vw;height: 100vh;"></iframe>
</body>
<script>
    window.addEventListener("message", function (event) {
        if (event.data.type === 1) {
            document.getElementById("edit").contentWindow.postMessage({url: "http://127.0.0.1/scene.yyds?t=1699631451609"}, "*");
        } else if (event.data.type === 2) {
            const link = document.createElement('a');

            function save(blob, filename) {
                if (link.href) {
                    URL.revokeObjectURL(link.href);
                }
                link.href = URL.createObjectURL(blob);
                link.download = filename || 'data.json';
                link.dispatchEvent(new MouseEvent('click'));
            }

            save(event.data.blob, "scene.yyds")
        }
    }, false);
</script>
</html>

← 无代码联系方式 →