mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
144 lines
4.7 KiB
Markdown
144 lines
4.7 KiB
Markdown
---
|
|
title: THREE.js
|
|
excerpt: |
|
|
|
|
|
|
head: |
|
|
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.156.1/build/three.module.js",
|
|
"three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
layout: post
|
|
hide_image: true # Only use this image for static previews
|
|
image: /assets/blog/toothbrush_shelf/spin.gif
|
|
alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly.
|
|
---
|
|
Other vase generators: https://www.vasedjinn.com/
|
|
http://daisyvases.com/
|
|
https://threejs.org/examples/webgl_geometry_shapes
|
|
want to port code from https://github.com/TomHodson/VaseExtruder
|
|
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
|
|
|
|
let mixer;
|
|
|
|
// Get background color of the body element
|
|
const body = document.getElementsByTagName("body")[0];
|
|
const style = window.getComputedStyle(body);
|
|
const background_color = style.getPropertyValue("background-color");
|
|
|
|
// create the scene and the camera
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(background_color);
|
|
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
camera.position.z = 100;
|
|
|
|
const canvas = document.getElementById("threejs");
|
|
const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, powerPreference: "low-power"});
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
// setup the controls
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
|
controls.target.set( 0, 0.5, 0 );
|
|
controls.update();
|
|
controls.enablePan = false;
|
|
controls.enableDamping = true;
|
|
|
|
const dracoLoader = new DRACOLoader();
|
|
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
|
|
|
|
const onWindowResize = () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
const loader = new GLTFLoader();
|
|
loader.setDRACOLoader( dracoLoader );
|
|
loader.load( '/assets/projects/bike_lights/model/untitled.glb', function ( gltf ) {
|
|
const model = gltf.scene;
|
|
console.log(model);
|
|
|
|
// traverse the scene and make modifications if necessary
|
|
model.traverse((o) => {
|
|
if (o.isMesh) {
|
|
const flat_material = new THREE.MeshBasicMaterial( {
|
|
color: 0xffffff,
|
|
polygonOffset: true,
|
|
polygonOffsetFactor: 1, // positive value pushes polygon further away
|
|
polygonOffsetUnits: 1
|
|
} );
|
|
|
|
o.material = flat_material;
|
|
scene.add(o);
|
|
|
|
// const flat_model = new THREE.LineSegments( o.geometry, flat_material);
|
|
// scene.add(flat_model);
|
|
|
|
const thresholdAngle = 10;
|
|
const wireframe_geometry = new THREE.EdgesGeometry(o.geometry, thresholdAngle);
|
|
|
|
const line = new THREE.LineSegments(wireframe_geometry);
|
|
line.material.color.setHex(0x000000);
|
|
line.scale.set(10,10,10)
|
|
scene.add(line);
|
|
|
|
// const line_material = new THREE.LineBasicMaterial( { color: 0x000000 } );
|
|
// const wireframe_model = new THREE.LineSegments( wireframe_geometry, line_material);
|
|
// wireframe_model.scale.set(10,10,10);
|
|
// scene.add(wireframe_model);
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// model.position.set( 1, 1, 0 );
|
|
// model.scale.set( 1, 1, 1 );
|
|
// scene.add( model );
|
|
|
|
animate();
|
|
|
|
// Add listener for window resize.
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
}, undefined, function ( e ) {
|
|
|
|
console.error( e );
|
|
|
|
} );
|
|
|
|
// const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
|
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
|
|
// const cube = new THREE.Mesh( geometry, material );
|
|
// scene.add( cube );
|
|
|
|
function animate() {
|
|
requestAnimationFrame( animate );
|
|
|
|
controls.update();
|
|
renderer.render( scene, camera );
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
|
|
<figure>
|
|
<canvas id = "threejs" style="width:100%"></canvas>
|
|
<figcaption>
|
|
Hey look, threeJS!
|
|
</figcaption>
|
|
</figure>
|
|
|