Designing a space using Three.js and cannon.js

Currently exploring Three.js and cannon.js, I've been attempting to construct a basic room without much luck. Referencing this sample, my goal is to include walls and a ceiling. What's the simplest approach to achieve this? At the moment, my code snippet looks like this:

                // wall?
            wallGeometry = new THREE.PlaneGeometry( 300, 300 );
            wallGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI));
            wallMesh = new THREE.Mesh( wallGeometry, material );
            wallMesh.castShadow = false;
            wallMesh.receiveShadow = true;
            scene.add(wallMesh);

However, the result is peculiarly illuminated, and I'm unable to interact with it properly. When trying to incorporate it through cannon.js, the wall becomes invisible. Any guidance on how to proceed in the right direction would be greatly appreciated.

javascriptthree.jscannon.js

Answer №1

When working with THREE.js, it's important to note that the library itself does not come equipped with physics capabilities. This means that objects created within THREE.js will not have built-in collision detection. To implement collision detection, you will need to either write your own code or rely on another library such as cannon.js.

Additionally, by default, THREE.js will only generate one ambient light for your scene. If you require dynamic lighting and shadows, you will need to manually add light sources to your scene. Objects that should interact with lights must be assigned either MeshLambertMaterial or MeshPhongMaterial. For shadows to appear correctly, specific properties must be set on your objects and appropriate types of lights must be used.

In your specific example, it appears that you have not defined a material for the walls, which could be why they are not visible.

Be sure to refer to the following resources for guidance and code snippets to aid in your THREE.js development:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble displaying the time in the middle square when pressing TouchableOpacity in React Native?

Having trouble pressing the TouchableOpacity button as it's not responding, and even after pressing it, I need to access the time picker to select a specific time to display inside the square view in the center. Any suggestions on how to resolve this ...

javascriptreactjsreact-nativedatepickerreact-hooks

What steps must be taken to display a div element upon clicking an object or entity within an Aframe scene?

Experiencing some coding issues that I could use help with. As a newcomer to Javascript, I might be making a beginner's error here. My goal is for the red tree on the globe in my example to trigger a red div box when clicked. Despite my efforts, I kee ...

javascriptthree.jsaframewebvr

Tips for addressing the Stale Element Reference Exception when locating an element in JMeter

Trying to locate an element with a structure similar to the following: <div> <div> <div> <ul> <object id = "obj" #document (link here) <html> <head> </head> ...

javascriptselenium-webdriverautomationjmeterstaleelementreferenceexception

How can we verify in enzyme that the history.push method was called while utilizing withRouter and connect?

In a stateless React component, I am utilizing withRouter and connect. Within this component, there is a button that triggers a method in props provided by mapDispatchToProps. My goal is to create a test that verifies the button's action of calling h ...

javascriptreactjsreact-reduxreact-routerenzyme

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

Top approach for inserting Class instance into a group

I need some guidance on how to approach this issue. I am interested in creating a set of objects similar to the example below: Person P = new Person(); P.Name = 'John'; P.Surname = 'Dough'; var People = []; People.push(P); Can this b ...

javascriptjqueryangularjs

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

javascripthtmlcss

Is the behavior of undefined different in Chrome?

Upon examining my Asp masterpage, I noticed the following code snippet: <script> if (theForm !== undefined) { // <<== line 746: error theForm.onsubmit = ...bla bla... ; } </script> When checking the Chrome console, an er ...

javascriptasp.netgoogle-chromeundefined

AngularJS restructured the homepage to function as a shell page instead of the traditional index page

As a newcomer to angularJS, I am learning that it is typically designed for Single Page Applications. Most example logins I come across define the index.html as the main page, with the ng-view portion contained within. However, in my situation, the Login ...

javascriptangularjs

Every time Chrome on Android returns a keyCode of 229

Here is a snippet of code that I am having trouble with: ... @HostListener('keydown', ['$event']) onKeyDown(evt: KeyboardEvent) { console.log('KeyCode : ' + evt.keyCode); console.log('Which : ' + evt.which); ...

javascriptangulargoogle-chrome

What about numerical inputs lacking spinners?

Is there a more efficient way for users to input a decimal number like 64.32, and have it be two-way-bound to a property of type number? I attempted to use <input type="number" [(ngModel)]="size"> However, this displays a spinner which isn't ...

javascriptangulartypescript

React is informing that the `toggleNode` prop is not recognized on this particular DOM element

I have encountered the following warnings in my app, which I believe are causing it to not load all its features properly. Warning: React is indicating that the toggleNode prop is not recognized on a DOM element. If you intend for it to be a custom attrib ...

javascriptreactjs

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

javascripthtmlcssangulartypescript

The some() method in Javascript with an extra argument

I want to validate if at least one element in an array satisfies a certain condition. The condition is based on a variable. Here's an example of how I'm currently attempting this: function checkCondition(previousValue, index, array) { retur ...

javascriptjqueryarrays

When it comes to retrieving values from JSON objects in JavaScript, one of two identical objects will return the expected values while the other may

I encountered a perplexing issue with two identical JSON objects. When I use JSON.stringify(obj1) == JSON.stringify(obj2), it returns true. Despite both objects being accessible and inspectable in the console, I'm facing difficulty accessing the valu ...

javascriptjsonreactjsleaflet

Efficiently uploading images with AJAX when submitting a form

I am attempting to upload an image along with other variables in a form submission, and then execute my PHP code to store the image in the user's profile_picture table. I want the image upload to be integrated within the same form used for saving dat ...

javascriptajax

Mapping a list of keys to Firebase objects in Vue.js

I am currently working on a compact web application using Vue.js and Firebase for data storage and synchronization. The app consists of storing 'items' with attributes like 'title' and 'subtitle', and 'lists' with an ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

Issue with Bootstrap alignment on the right side

Just finished creating my 'navbar' in bootstrap, but I'm having trouble aligning my unordered list to the right. It's staying in the middle no matter what I try. Can someone please help? Feeling really confused... HTML: <div class= ...

javascripthtmlcsstwitter-bootstrap

Cordova triggers a 500 (Internal Server Error) when making an Ajax request

When I send an ajax request, it works fine in the browser but returns an internal error when sent within a Cordova APK. Upon comparing the headers, I noticed that the only difference is in the ORIGIN: The one not working has origin: file:// POST 500 (In ...

javascriptandroidajaxcordova

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom