three.js 3d ui简单示例代码

three-mesh-ui example，带英文文本的按钮，如需支持中文，需自行生成MSDF字体。

three, ui

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 697
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

let scene, camera, renderer, controls;

window.addEventListener("load", init);
window.addEventListener("resize", onWindowResize);

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x505050);

camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 100);

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);

camera.position.set(0, 1.6, 0);
    // camera.lookAt(new THREE.Vector3(0, 1, -1.8));

// TEXT PANEL

makeTextPanel();

renderer.setAnimationLoop(loop);
}

function makeTextPanel() {
    const container = new ThreeMeshUI.Block({
        width: 1.45,
        height: 0.5,
        padding: 0.05,
        justifyContent: "center",
        textAlign: "center",
        fontFamily: '/uploads/2210/Roboto-msdf.json',
        fontTexture: '/uploads/2210/Roboto-msdf.png',
    });

container.position.set(0, 1, -1.8);
    container.rotation.x = -0.2;
    scene.add(container);

container.add(
        new ThreeMeshUI.Text({
            content: "techbrood.com",
            fontSize: 0.125
        })
    );
}

// handles resizing the renderer when the viewport is resized

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function loop() {
    ThreeMeshUI.update();
    renderer.render(scene, camera);
}

编译

CSS

HTML

three-mesh-ui example，带英文文本的按钮，如需支持中文，需自行生成MSDF字体。

three, ui

编辑器支持Emmet

快捷键

three-mesh-ui example，带英文文本的按钮，如需支持中文，需自行生成MSDF字体。

three, ui

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：