EdgesGeometry with 3MF model
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { ThreeMFLoader } from "https://threejs.org/examples/jsm/loaders/3MFLoader.js";
import { LineMaterial } from "https://threejs.org/examples/jsm/lines/LineMaterial.js";
import { LineSegments2 } from "https://threejs.org/examples/jsm/lines/LineSegments2.js";
import { LineSegmentsGeometry } from "https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js";
var camera, scene, renderer;
var edgeMaterial;
init();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
// Z is up for objects intended to be 3D printed.
camera.up.set( 0, 0, 1 );
camera.position.set( - 80, - 90, 150 );
scene.add( camera );
var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.minDistance = 50;
controls.maxDistance = 300;
controls.enablePan = false;
controls.target.set( 80, 65, 20 );
controls.update();
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
var loader = new ThreeMFLoader();
loader.load( 'https://threejs.org/examples/models/3mf/cube_gears.3mf', function ( object ) {
edgeMaterial = new LineMaterial( { color: 0xff0000, linewidth: 5 } );
const meshes = [];
object.traverse( function( child ) {
if ( child.isMesh ) meshes.push( child );
} );
for ( let mesh of meshes ) {
var edges = new THREE.EdgesGeometry(...