At the moment, I am utilizing the threejs library to design 3D objects. However, I am facing an issue where the object is overflowing outside the canvas if it is too long. You can view my code snippet on JSFiddle.
Script
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'
function create3DObject(selector, angle, depth, width, height) {
let validAngles = [
'standard-0',
'standard-90',
'turn-up-0',
'turn-up-90',
'turn-side-0',
'turn-side-90'
]
if(validAngles.indexOf(angle) < 0) {
console.log("Incorrect angle")
return false
}
const canvas = document.querySelector(selector)
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
const canvasWidth = canvas.getBoundingClientRect().width
const canvasHeight = canvas.getBoundingClientRect().height
const minSize = Math.min(...[depth, width, height])
const maxSize = Math.max(...[depth, width, height])
const aspect = canvasWidth / canvasHeight
const fov = 75
const near = 0.1
const far = 1000
let cameraZoom = 1
let cameraPosition = {
left: canvasWidth / -2,
right: canvasWidth / 2,
top: canvasHeight / 2,
bottom: canvasHeight / -2
}
const camera = new THREE.OrthographicCamera(
cameraPosition.left,
cameraPosition.right,
cameraPosition.top,
cameraPosition.bottom,
near,
far
)
camera.position.z = maxSize + minSize
camera.zoom = cameraZoom
camera.updateProjectionMatrix()
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xe0e0e0)
const geometry = new THREE.BoxGeometry(width, height, depth)
const material = new THREE.MeshBasicMaterial({ color: 0xff4500 })
const cube = new THREE.Mesh(geometry, material)
var edge = new THREE.EdgesGeometry(cube.geometry)
var edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 1 })
var wireframe = new THREE.LineSegments(edge, edgeMaterial)
scene.add(cube, wireframe)
function animate() {
requestAnimationFrame(animate)
let rotationX = 0
let rotationY = 0
let rotationZ = 0
if(angle == 'standard-0') {
rotationX = 0.60
rotationY = -0.80
rotationZ = 0
}
if(angle == 'standard-90') {
rotationX = 0.60
rotationY = 0.80
rotationZ = 0
}
if(angle == 'turn-up-0') {
rotationX = -1.20
rotationY = 0
rotationZ = 0.80
}
if(angle == 'turn-up-90') {
rotationX = -1.20
rotationY = 0
rotationZ = -0.80
}
if(angle == 'turn-side-0') {
rotationX = 0.60
rotationY = -0.60
rotationZ = -1.60
}
if(angle == 'turn-side-90') {
rotationX = 0.60
rotationY = 0.60
rotationZ = -1.60
}
cube.rotation.x = rotationX
cube.rotation.y = rotationY
cube.rotation.z = rotationZ
wireframe.rotation.x = rotationX
wireframe.rotation.y = rotationY
wireframe.rotation.z = rotationZ
renderer.render(scene, camera)
}
animate()
}
create3DObject('.standard-0', 'standard-0', 50, 45, 65)
create3DObject('.standard-90', 'standard-90', 50, 45, 65)
create3DObject('.turn-up-0', 'turn-up-0', 50, 45, 65)
create3DObject('.turn-up-90', 'turn-up-90', 50, 45, 65)
create3DObject('.turn-side-0', 'turn-side-0', 50, 45, 65)
create3DObject('.turn-side-90', 'turn-side-90', 50, 45, 65)
Desired Output