Issue with Three.js sample scene not functioning correctly

Forgive my lack of experience, but I am new to three.js and seeking guidance from the experts. I am starting with a basic scene to build my understanding from there. I began with an example scene from the documentation, but when I run it locally or on my server, I only see a blank white screen with no canvas or scene. The examples I downloaded work fine in both scenarios, so I am unsure why this particular code is not functioning. Here is the code I am using:

<!DOCTYPE html>
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<canvas></canvas>
<script src="threejs/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 1000;
function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
};
render();
</script>
</body>
</html>

Any assistance would be greatly appreciated.
Thank you, Joe

Answer №1

Make sure to verify the location of your three.js file. I found success with this src, as my html file is located in the home folder under three.js-master.

<script src="build/three.js"></script>

Answer №2

I encountered a similar issue as well. The instructions recommended copying the three.js file into the first_app folder (specifically the 'js' folder). Even after changing the src to "build/three.js" as suggested by Ben, it still didn't resolve the problem for me. Eventually, I decided to experiment by removing the "js/" portion from the code... and surprisingly, it fixed the issue.

So, my 'src' line in the code now appears like this:

    `<src="three.js">File not found...</script>

This workaround succeeded because there was a duplicate of the three.js file in the same directory as the application. Strangely, the tutorial instructions didn't work flawlessly, but this alternative method might work for you too.

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

Retrieving data response post upload with JQuery and an HTML5 Uploader

After uploading an image and receiving a successful post response with the id of the inserted image, how can I insert this response as a data-id attribute within a a tag? Where in the function does this process occur? Here is the function: function img_ ...

The TS2769 error occurs when trying to change the react calendar due to no matching overload in the

The calendar functionality in my project was implemented using the response calendar library. Suddenly, I encountered an onChange prop error in the default code. This was working fine before. What steps should I take to resolve this issue? Here is my cod ...

Using Async/await appropriately in node.js

I have written code to call a procedure with an OUT parameter type of cursor (ResultSet). To fetch data from this ResultSet, I created a function called fetchRowsFromRS() that extracts the data. In my fetchRowsFromRS() function, I am using a return state ...

How to change from using position: sticky to fixed after scrolling to a specific div

Is there a way to transition the position of sticky content from sticky to Fixed while scrolling down and moving to the next rows, keeping it fixed until just before the footer, where it should scroll again? For example, <!DOCTYPE html> <html ...

Attempting to utilize the LLL algorithm as described on Wikipedia has led to encountering significant challenges

I'm struggling with determining whether my issue stems from programming or understanding the LLL algorithm mentioned on Wikipedia. To gain a better understanding of the LLL algorithm, I attempted to implement it following the instructions outlined on ...

Working with color fills in Three.js shapes

Looking for some help with code that generates a yellow circle: let radius = 5, segments = 64, material = new THREE.LineBasicMaterial( { color: 0xF0C400 } ), geometry = new THREE.CircleGeometry( radius, segments ); geometry.vertices.shift ...

An object rotating in a loop with Three.js will not cast a shadow over the entire scene

Why are some cubes in my loop not casting shadows? Despite using a directional light that should cast shadows on all cubes, the shadowing stops after around 5 columns. let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5); dirLight.position.set(300, - ...

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...

Serve as a proxy for several hosts with identical URL structures

I've been utilizing the http-proxy-middleware to handle my API calls. Is there a way to proxy multiple target hosts? I've searched for solutions in the issues but still haven't found a clear answer. https://github.com/chimurai/http-proxy-m ...

What are some strategies to enhance the efficiency of this code and reduce repetition?

Here's an overview of the component in question export default () => { const { currentUser, logout } = useAuth(); const [sideBarOpen, setSideBarOpen] = useState(false); const theme = useTheme(); const classes = useStyles(); const isSmall ...

transferring scoped model information to the controller

When using AngularJS, my view is structured like this: <div class="sli1" ng-init="values=[10,20,30,40,50]" <div class="sli2" ng-init="values2=[10,20,30,40,50]" I am attempting to send the initial data models back to the controller for retrieva ...

Having trouble getting a JS file to work with the Laravel Inertia.js and Vue.js3 template

Just getting started with inertia.js and facing an issue. My CSS styles are being applied, but my JavaScript file isn't functioning as expected. I'm working on an admin dashboard using Laravel 9 and vue.js-3 with a custom HTML template. Interes ...

What is the most efficient way to save a document in mongoose based on a specific user's

Is there a way to ensure that when saving a template, it is associated with the user id? I have added a reference to the templateSchema for the User. User.model.js var UserSchema = new mongoose.Schema({ _id: { type: String, required: true, index: {uniq ...

Is it possible to include a module-level controller within a directive?

I am currently navigating the complexities of controllers, modules, and services in Angular JS. In my attempt to integrate a controller into my directive, I faced an issue. The controller I intend to reference belongs to the same module as the directive, ...

Exchange of Fusion Chart

Attempting to perform a fusion chart swap with asp has proven to be challenging. The alternative approach involves rendering the fusion chart first and then using onmousedown to replace the chart with an image. However, this method is also encountering i ...

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

I'm having trouble creating an expression to validate numbers between 1.0 to 4.5 accurately. The current expression I'm using is not working as intended: /^[1-4]{0,1}(?:[.]\d{1,2})?$/ The requirement is to only allow values between 1.0 to ...

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

Problem with MeshDepthMaterial in shadow generation

When it comes to shadows, sometimes they only show a portion of an object rather than the entire thing. For example, I have a tree with transparent leaves and used a MeshDepthMaterial for it. However, when the shadow is cast, only the trunk is visible and ...

The initial render of Keen-slider in NextJS can sometimes encounter difficulties when using server-side rendering

While incorporating the keen-slider library v5.4.0 into my nextJS project with TypeScript, I encountered a peculiar issue. The error arises when the keen-slider is initially loaded for the first time, resulting in mismatched transform types causing items ...

Tips for enhancing the presentation of JSON information

I recently ventured into the world of JSON and JS, managing to create a JSON file to showcase data using .onclick event. While I have successfully generated and displayed the JSON data on screen, my next goal is to present it in a table format for better c ...