“0” width for box renders as “1” width

Question

When creating a box

new THREE.BoxGeometry(opening.geometry.xLength, opening.geometry.yLength, opening.geometry.zLength)

when you make a 0 width box.

new THREE.BoxGeometry(0, 1, 1)

It renders on the screen with 1 as width. I think it should not render anything. Is this a bug of threejs?.

Answer 1

The dimensions passed to the constructor of BoxGeometry or BoxBufferGeometry must be positive.

three.js does not validate function, or constructor, arguments.

three.js r.106

Answer 2

Three.js's current code is written such that 0 = use the default size of 1

You can work around it by making a size 1 box and scaling the geometry

const geometry = new THREE.BoxGeometry(); // default is 1
geometry.applyMatrix(new THREE.Matrix4().makeScale(
    opening.geometry.xLength, opening.geometry.yLength, opening.geometry.zLength));

 'use strict'; /* global THREE */ function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas}); const fov = 75; const aspect = 2; // the canvas default const near = 0.1; const far = 5; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 2; const scene = new THREE.Scene(); scene.background = new THREE.Color('white'); function addLight(...pos) { const color = 0xFFFFFF; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); light.position.set(...pos); scene.add(light); } addLight(-1, 2, 4); addLight( 2, 1, 4); const geometry = new THREE.BoxGeometry(); geometry.applyMatrix(new THREE.Matrix4().makeScale(0, 1, 1)); const material = new THREE.MeshPhongMaterial({color:'red'}); const box = new THREE.Mesh(geometry, material); scene.add(box); function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render(time) { time *= 0.001; if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } box.rotation.x = time; box.rotation.y = time; renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); } main(); 

 body { margin: 0; } #c { width: 100vw; height: 100vh; display: block; } 

 <canvas id="c"></canvas> <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>