While attempting to create a box
new THREE.BoxGeometry(opening.geometry.xLength, opening.geometry.yLength, opening.geometry.zLength)
a situation arises where a box with 0 width is produced.
new THREE.BoxGeometry(0, 1, 1)
Surprisingly, it ends up rendering a box with a width of 1 on the screen. This seems unexpected as I would have expected it not to render anything. Could this be a bug within threejs?
When using Three.js, the current code is set up so that a value of 0 corresponds to the default size of 1
To address this, you can create a size 1 box and adjust the size of the geometry using scaling
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>Make sure to provide positive dimensions when using the BoxGeometry or BoxBufferGeometry constructor.
It's important to note that three.js does not verify arguments passed to functions or constructors.
Version of three.js being used: r.106
Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...
Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...
My dilemma involves a specific Javascript object. { A: 1, B: 2, C: 2, D: 1, E: 1, F: 4, G: 6, H: 2 }, The goal is to extract a four-letter string based on the key with the highest value, but there are limitations. The stri ...
Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app. Not utilizing Vuex ...
Upon taking over a project involving ASP.Net AJAX and JSON, I encountered an issue on a page that loads a large select (combo box) list of 1,430 entries. This list loads successfully on our main search page but produces an error in MicrosoftAjaxTemplates.d ...
I am looking for a way to send a notification email to my site admin whenever a user submits a request via a form. Currently, I have the following code that is supposed to link to a PHP file on my server to handle the email sending: $("#modelform").submit ...
Currently, I am faced with a conundrum when it comes to selecting the best approach for a highly scalable project. On one hand, server-side rendering using Node.js with Express (utilizing EJS) to render full HTML pages is an option. On the other hand, ther ...
Is it possible to attach a mouseover event specifically to the left border of a div element in HTML? The div serves as a container for various other intricate HTML elements, each with their own mouseover events. While binding a mouseover event to the enti ...
I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...
I'm currently revamping a click-to-open navbar into a hover bar for a new project. I have successfully implemented the onMouseEnter and onMouseLeave functions, allowing the navbar to open and close on mouse hover. However, I am facing an issue with ad ...
Currently, I am utilizing Django and Apache for webpage serving purposes. In my JavaScript code, I have a data object that contains values to be exhibited in HTML widgets based on the user's selection from a menu. I am looking for a way to derive this ...
While reading through the Angular Component Router documentation, I came across an npm command that caught my attention: npm install @angular/router --save I'm puzzled by the meaning of @angular/router. Is this entire string a package name? If so, ...
I recently decided to upgrade one of my projects to use the Google Maps API v3 instead of v2. In v2, I used the following code to append a div to the map pane: $("#marker_popup").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); Is there a straightforward ...
Can you lend me a hand in understanding this? I have an angular controller that is structured like so: angular.module('myApp', []) .controller('ListCtrl', function($scope, $timeout, $http){ // Making API calls for Health List ...
Recently, I added in-place editing feature to one of my models to enhance user experience. Among the attributes of the model, there is one called PRICE, for which I utilized the to_currency method to format the value properly before displaying it. Howeve ...
Check out the origin of $.parseJSON function (data) { if (typeof data !== "string" || !data) { return null; } // Remove leading/trailing whitespace for compatibility data = jQuery.trim(data); // Try native JSON parser first ...
Is there a way to dynamically change the title of the window based on each route? I have included a meta: { title: ... } object in each child object within the routes: []. Here is an example: routes: [ { path: 'profile/:id', name: 'Prof ...
Within our online store, some products feature a yForm to consolidate various parts of the product. Is there a straightforward method to automatically transfer the sum field value to another field, such as the product quantity (which does not use yForm)? I ...
I've been attempting to create a D3.js chart similar to the one shown in the first screenshot: https://i.sstatic.net/GgP1d.png While I can easily replicate a chart like the second screenshot using the default examples, the challenge arises when I tr ...
In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...