The color of the three js cube is charcoal, definitely not a fiery red

Just dipping my toes into the world of three.js...my cube is displaying in black even though I set the color to red. Any ideas why?

<!DOCTYPE html>
<html>

    <head>
        <title>Experimenting with shapes</title>
        <script type="text/javascript" src="../lib/threejs/build/three.js"></script>
        <script type="text/javascript" src="../lib/jquery-2.1.3.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="output">

        </div>

        <script type="text/javascript">
            $(function() {
                var scene = new THREE.Scene();

                var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xEEEEEE);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMapEnabled = true;

                var cubeGeometry = new THREE.CubeGeometry(8,8,8);

                var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000});

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;

                scene.add(cube);

                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z = 30;
                camera.lookAt(scene.position);

                $("#output").append(renderer.domElement);
                renderer.render(scene, camera);
            });
        </script>
    </body>

</html>

I specified the color in the mesh lambert material...I'm unsure why it's showing up as black instead of red. Could it be related to the setClearColour function by any chance?

Answer №1

My initial comment was as follows:

I decided to switch from using MeshLambertMaterial to MeshBasicMaterial, and it turned out that this change resolved the issue. My assumption is that the color of the Lambert material is likely influenced by the presence of a light source on the object. Without any light, the color appears black...

Here is my revised code snippet:

$(function() {
                var scene = new THREE.Scene();

                var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xEEEEEE);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMapEnabled = true;

                var cubeGeometry = new THREE.CubeGeometry(8,8,8);

                var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000});

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;

                scene.add(cube);

                //add some lighting
                var ambientLight = new THREE.AmbientLight(0x0c0c0c);
                scene.add(ambientLight);

                var spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(-40, 60, -10);

                spotLight.castShadow = true;

                scene.add(spotLight);


                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z = 30;
                camera.lookAt(scene.position);

                $("#output").append(renderer.domElement);
                renderer.render(scene, camera);
            });

It turns out my hypothesis was correct – when using Lambert or Phong materials, proper lighting is essential. Otherwise, in darkness, the colors won't be distinguishable as these materials rely on lighting effects.

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

THREE.JS ensures that the face normal is perpendicular to the face and facing outward

When using THREE.JS to generate a custom geometry, I define vertices and faces. However, when creating a face without specifying the normal direction like new THREE.Face3(a,b,c), some faces end up pointing inward instead of outward. Is there a way to ens ...

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

Rendering seems to be working fine for the mainWindow. webpack.config.js : var renderer_config = { mode: isEnvProduction ? 'production' : 'development', entry: { app: './src/app/index.tsx', //app_A: './src/a ...

Comparing AngularJS $interpolate with $filter

AngularJS offers different tools for manipulating data displayed to users. While $filter is commonly used for formatting data, $interpolate enables real-time updates within a text string. Do $interpolate and $filter have any connection? How do they differ ...

retrieve file through an ajax call

When I click on a button, I want to send an AJAX download request. I attempted it like this: Here is my JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("GET", "download.php"); xhr.send(); In the download.php file: <? header("Cache-Control: ...

What could be causing anime.js to malfunction when clicked in Vue.js?

After implementing the mounted() function, the animation now successfully plays when the page is updated. However, there seems to be an issue as the animation does not trigger when clicked. Even though console.log registers a click event, the animation fa ...

Navigating through a website that loads content dynamically with AJAX can be easily done by

Having an issue with scraping data from a website using jQuery AJAX. There are 300 links to scrape, but the site only shows 50 at a time, requiring scrolling to load more. Can someone assist me with this? var baseURL = "https://hr.myu.umn.edu/psc/hrp ...

When calling a method that has been created within a loop, it will always execute the last method of the

In my project, I am utilizing node version 0.8.8 in conjunction with express version 3.0. Within the codebase, there exists an object named checks, which contains various methods. Additionally, there is an empty object called middleware that needs to be p ...

Omit a specific page from the primary Next.js layout within the application directory

In my project, I have a main layout file located at /app/layout.tsx and separate authentication pages. I want the authentication pages to have their own custom layout defined in the file /app/auth/layout.tsx. The issue I am facing is that the main layout ...

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

The initial click may not gather all the information, but the subsequent click will capture all necessary data

Issue with button logging on second click instead of first, skipping object iteration function. I attempted using promises and async await on functions to solve this issue, but without success. // Button Code const btn = document.querySelector("button") ...

Unable to render the JSON data that was retrieved from a jQuery AJAX request

I am having trouble displaying JSON data that is returned from an AJAX call. Can someone please assist me? I am new to this. $.ajaxSetup({ cache: false, timeout: 5000 }); //String.prototype.toJSON; var the_object = {}; function concatObject(obj) { ...

How can you start a jQuery script following a triumphant Ajax callback?

Having some trouble getting jQuery to execute after a successful Ajax response. Even though I have it in the success callback, it doesn't seem to be working as expected. I came across a potential solution here, but I'm having difficulty understan ...

What is the best way to instantly validate a form in React before submitting?

Having trouble with my form validation. The issue is that after validating the form on submit, I have to click the submit button a second time to actually send it and see the console.log at the bottom of the file. Any ideas on what might be causing this a ...

The three.js pointLight has been updated from version 67 to version 68

There appears to be a change in the interaction between a pointlight and a plane from version r.67 to r.68. I am currently studying three.js by following along with a book that is a year old. I have simplified the tutorial example to include just a plane, ...

To prevent the page focus from shifting, make sure to force click on a blank link

My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...

The component 'AddPlaceModal' could not be located in the path '~/components/AddPlaceModal.vue'

Recently, I started incorporating Nuxt for Vue into my projects. In an attempt to enhance my page, I added a new component within the /components folder. However, I encountered a warning during compilation: "export 'AddPlaceModal' was not found ...

Press the jQuery button and inform me once it has been activated

My jQuery code is set up to automatically press buttons for me every second. Occasionally, some pages take a long time to load until the button appears. Here is the current code I am using: (function($){ setInterval(function(){ $('.play-b ...

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

conceal or reveal a button based on the authentication status of a user in a

I'd like to display a "Become Tutor" button if either: 1. The user is not logged in. 2. The logged-in user is not already a tutor. Otherwise, I want to show the "Tutor Dashboard" button for users who are already tutors. While my code is functional, i ...