a-frame-component-simplify-modifier's Introduction

A-Frame-Component: Simplify-Modifier

Description / Rationale

This is A-Frame component for simplification of GLTF meshes. It is the adaptation of similar example made in Three.js with additional features:

Simplification of multiple gltf meshes
Assigning color to simplified mesh
Enabling wireframe of simplified mesh.

Instructions

In order to use the component attach "simplify-modifier" to a-entity with gltf-model component. The component has the following attributes:

color: { type: 'color', default: '#ffffff' } - Color of the simplified mesh
wireframe: { type: 'boolean', default: false } - Whether to show wireframe of simplified mesh or not
count: { type: 'number', default: 0.7 } - Vertices to remove. Accepts values from 0 to 1. 0 - almost no simplifaction is made. 1 - complete simplification. Please note that if 1 is selected, mesh will not be visible.
offset: { type: 'number', default: 1 } - Offset of simplified mesh on x-axis. If 0 is selected, it will be in the same position as original GLTF model.

The code below shows the sample implementation of the component:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A-Frame Component: Simplify Modifier</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <script src="js/simplifymodifier-component.js"></script>
</head>
<body>
    <a-scene>
        <a-entity simplify-modifier="color: lightblue" gltf-model="3d/LeePerrySmith.glb" position="-1 1.5 -2" rotation="0 0 0" scale="0.2 0.2 0.2" scale="0.01 0.01 0.01"></a-entity>
        <a-sky color="#000"></a-sky>
    </a-scene>
</body>
</html>

Please not that meshes without textures are only supported. When doing simplification if mesh is not visible, try to decrease the count value.

Tech Stack

The project is powered by AFrame and Three.js. The 3d model (gltf file) was taken from Three.js repository.

Demo

See demo of the component here: Demo

Recommend Projects

akbartus / a-frame-component-simplify-modifier Goto Github PK