three.js Draco模型压缩文件加载代码示例

three.js draco 3d model ( or point cloud ) compression file usage example。draco是一个高效的开源3d数据压缩（解压）开发库，能大幅压缩模型数据，从而减少3d模型数据的网络传输负载。

three, compression, demo

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

fileDisplayArea.innerText = "Loading...";
// Load the model 10 times
const numModels = 12;
let loadedModel = 0;
// Module that exposes all the core funcionality of the Draco decoder.
const DracoModule = Module;

let container;
let camera, scene, renderer;
let mouseX = 0,
    mouseY = 0;

let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let start_time;

init();
animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
    camera.position.set(3, 0.15, 3);

cameraTarget = new THREE.Vector3(0, -0.1, 0);

scene = new THREE.Scene();
    //scene.fog = new THREE.Fog( 0x72645b, 2, 15 );

scene.fog = new THREE.Fog(0x72645b, 10, 60);

//scene.fog.color.setHSL( 0.51, 0.6, 0.6 );
    scene.fog.color.setHSL(0.0, 0.0, 0.0);
    // Ground

var plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(40, 40),
        new THREE.MeshPhongMaterial({
            color: 0x0,
            specular: 0x101010
        })
    );
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = -0.5;
    scene.add(plane);

plane.receiveShadow = true;

// Lights

scene.add(new THREE.HemisphereLight(0x443333, 0x111122));

addShadowedLight(1, 1, 1, 0xffffff, 1.35);
    addShadowedLight(0.5, 1, -1, 0xffaa00, 1);

// renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(scene.fog.color);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.renderReverseSided = false;
    container.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);

const fileDisplayArea = document.getElementById('fileDisplayArea');
    start_time = performance.now();

loadOneModel();
}

function addShadowedLight(x, y, z, color, intensity) {
    const directionalLight = new THREE.DirectionalLight(color, intensity);
    directionalLight.position.set(x, y, z);
    scene.add(directionalLight);

const d = 1;
    directionalLight.shadow.camera.left = -d;
    directionalLight.shadow.camera.right = d;
    directionalLight.shadow.camera.top = d;
    directionalLight.shadow.camera.bottom = -d;
    directionalLight.shadow.camera.near = 1;
    directionalLight.shadow.camera.far = 4;
    directionalLight.shadow.mapSize.width = 1024;
    directionalLight.shadow.mapSize.height = 1024;
    directionalLight.shadow.bias = -0.005;
}

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

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    const timer = Date.now() * 0.0005;
    // camera.position.x = Math.sin(timer) * 2.5;
    // camera.position.z = Math.cos(timer) * 2.5;
    camera.position.x = 6.5;
    camera.position.z = 6.5;
    camera.position.y = 1.5;
    camera.lookAt(cameraTarget);

for (i = 1; i <= loadedModel; ++i) {
        let mesh = scene.getObjectByName(i.toString());
        mesh.rotation.y += Math.PI * 0.01;
    }

renderer.render(scene, camera);
}

function loadGeometry(raw_data) {
    const fileDisplayArea = document.getElementById('fileDisplayArea');

const dracoLoader = new THREE.DRACOLoader();
    const bufferGeometry = dracoLoader.decodeDracoFile(raw_data);

const total_time = performance.now() - start_time;
    fileDisplayArea.innerText += "Total loading time is " + total_time.toFixed(3).toString() + "ms\n";

geometry.scale.multiplyScalar(scale);
    geometry.position.x = -midX * scale - numModels / 2 + loadedModel - 1;
    geometry.position.y = -midY * scale;
    geometry.position.z = -midZ * scale;
    geometry.castShadow = true;
    geometry.receiveShadow = true;
    // TODO(zhafang): Multi thread problem with render.
    loadedModel++;
    geometry.name = loadedModel.toString();
    scene.add(geometry);
}

编译

CSS

HTML

three.js draco 3d model ( or point cloud ) compression file usage example。draco是一个高效的开源3d数据压缩（解压）开发库，能大幅压缩模型数据，从而减少3d模型数据的网络传输负载。

three, compression, demo

编辑器支持Emmet

快捷键

three.js draco 3d model ( or point cloud ) compression file usage example。draco是一个高效的开源3d数据压缩（解压）开发库，能大幅压缩模型数据，从而减少3d模型数据的网络传输负载。

three, compression, demo

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：