Published
Edited
Sep 24, 2020
1 fork
9 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gear = {
const radius = 1
return CSG.fromMesh(new THREE.Mesh(new THREE.CylinderGeometry(
radius,
radius,
0.2,
Math.ceil(detail * 8)
)))
}
Insert cell
Insert cell
cutTemplate = {
const radius = 0.05 + 1.5 / teeth
return new THREE.Mesh(new THREE.CylinderGeometry(
radius,
radius,
2,
6
))
}
Insert cell
Insert cell
toothCuts = {
let toothCuts = CSG.fromMesh(new THREE.Mesh(new THREE.Geometry()))

for (var i = 0; i < teeth; i++) {
const cut = cutTemplate
cut.matrix = new THREE.Matrix4()
.multiply(new THREE.Matrix4().makeRotationY(i * Math.PI * 2 / teeth))
.multiply(new THREE.Matrix4().makeTranslation(0, 0, 1))
.multiply(new THREE.Matrix4().makeRotationY(Math.PI / 6))
toothCuts = toothCuts.union(CSG.fromMesh(cut, cut.matrix))
}

return toothCuts
}
Insert cell
Insert cell
hole = CSG.fromMesh(new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 2, Math.ceil(detail * 4))))
Insert cell
Insert cell
notch = {
const notch = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.1, 0.1))
notch.applyMatrix(new THREE.Matrix4()
.multiply(new THREE.Matrix4().makeTranslation(0, 0, -0.2)))
return notch
}
Insert cell
Insert cell
insets = {
const insets = [[-0.55, 0.6, 2.6], [0.55, 2.6, 0.6]].map(([insetPosition, fromRadius, toRadius]) => {
const inset = new THREE.Mesh(
new THREE.CylinderGeometry(fromRadius, toRadius, 1, Math.ceil(detail * 6))
)

inset.applyMatrix(new THREE.Matrix4()
.multiply(new THREE.Matrix4().makeTranslation(0, insetPosition, 0)))

return CSG.fromMesh(inset)
})
return insets[0].union(insets[1])
}
Insert cell
Insert cell
toothCutGear = gear.subtract(toothCuts)
Insert cell
Insert cell
insetGear = toothCutGear.subtract(insets)
Insert cell
Insert cell
mesh = {
let gearResult = insetGear
gearResult = gearResult.subtract(hole)
gearResult = gearResult.subtract(CSG.fromMesh(notch))
return CSG.toMesh(gearResult, new THREE.Matrix4())
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
renderMesh.geometry = mesh.geometry
renderMesh.material = material === 'Gold' ? gold : aluminum
floor.material = floorMaterial
renderer.render(scene, camera)
}
Insert cell
Insert cell
gold = new THREE.MeshStandardMaterial({
color: 0xffffcc,
metalness: 1,
roughness: 0.85,
envMap: cubeMapTexture
})
Insert cell
aluminum = new THREE.MeshStandardMaterial({
color: 0xeeeeee,
metalness: 1,
roughness: 1,
envMap: cubeMapTexture,
})
Insert cell
floorMaterial = new THREE.MeshStandardMaterial({
roughness: 0.85,
metalness: 0,
color: 0x888888,
envMap: cubeMapTexture,
})
Insert cell
floor = {
const geometry = new THREE.PlaneBufferGeometry(500, 500, 8)
const floor = new THREE.Mesh(geometry)
floor.receiveShadow = true
floor.rotation.x = -Math.PI / 2
return floor
}
Insert cell
scene = {
let scene = new THREE.Scene()
scene.add(renderMesh)
const light = new THREE.DirectionalLight(0xfff8f8, 1)
light.castShadow = true
light.position.set(-0.5, 2, 0.8)
light.position.multiplyScalar(5)
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add(light)
const light2 = new THREE.DirectionalLight(0xf8ffff, 0.75)
light2.position.set(1, 1, -0.8)
light2.position.multiplyScalar(5)
scene.add(light2)

scene.add(floor)
return scene
}
Insert cell
Insert cell
cubeMapTexture = {
return new Promise((resolve, reject) => {
const hdrUrls = [
'px.hdr',
'nx.hdr',
'py.hdr',
'ny.hdr',
'pz.hdr',
'nz.hdr'
]
const hdrCubeMap = new THREE.HDRCubeTextureLoader()
.setPath('https://gist.githubusercontent.com/k9/709d8d93e91204e6fe1d02f91a1ead27/raw/302b9d396a7d1793f730da6962f3464e2bae4cab/')
.setDataType(THREE.UnsignedByteType)
.load(hdrUrls, function () {
var pmremGenerator = new THREE.PMREMGenerator(hdrCubeMap);
pmremGenerator.update(renderer);
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
pmremCubeUVPacker.update(renderer);
const hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
hdrCubeMap.magFilter = THREE.LinearFilter;
hdrCubeMap.needsUpdate = true;
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
resolve(hdrCubeMap)
})
})
}
Insert cell
height = width * 9 / 16
Insert cell
Insert cell
THREE = {
const THREE = window.THREE = await require("three@0.109.0/build/three.min.js")
await require('three@0.109.0/examples/js/controls/OrbitControls.js').catch(() => {})
await require('three@0.109.0/examples/js/loaders/EquirectangularToCubeGenerator').catch(() => {})
await require('three@0.109.0/examples/js/loaders/HDRCubeTextureLoader').catch(() => {})
await require('three@0.109.0/examples/js/loaders/RGBELoader').catch(() => {})
await require('three@0.109.0/examples/js/pmrem/PMREMCubeUVPacker').catch(() => {})
await require('three@0.109.0/examples/js/pmrem/PMREMGenerator').catch(() => {})
await require('three@0.109.0/examples/js/pmrem/PMREMGenerator').catch(() => {})
return THREE;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more