框的“ 0”寬度呈現為“ 1”寬度

Question

創建盒子時

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

當您制作一個0寬度的框時。

new THREE.BoxGeometry(0, 1, 1)

它以1作為寬度在屏幕上呈現。 我認為它不應呈現任何內容。 這是threejs的錯誤嗎？

Answer 1

傳遞給BoxGeometry或BoxBufferGeometry的構造函數的BoxBufferGeometry必須為正。

three.js不會驗證函數或構造函數的參數。

three.js r.106

Answer 2

Three.js的當前代碼編寫為0 =使用默認大小1

您可以通過設置大小為1的框並縮放幾何來解決此問題

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>