Feeling lost on the intricacies of threejs functionality

Question

Feeling lost on the intricacies of threejs functionality

I have incorporated a sample code into this html/css document that utilizes a script to generate a 3D cube using three.js.

Upon opening the HTML file, I am presented with a blank page in chrome displaying only, "canvas { width: 100%; height: 100% }"

Below is the code snippet:

<html>
   <head>
      <title>My first Three.js app</title> &lt;style>canvas { width: 100%; 
height: 100% }</style>
   </head>
   <body>
      <script src="js/three.min.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);
         function render() {
             requestAnimationFrame(render);
             cube.rotation.x += 0.01;
             cube.rotation.y += 0.01;
             renderer.render(scene, camera);
         }
         render();
      </script>
   </body>
</html>

html css three.js 3d

Answer 1

Answer №1

It seems like your camera might be starting inside the cube.

To address this issue, you can try the following:

camera.position.set (0,0,1000)

Additionally, you can also consider adding:

camera.lookAt (new THREE.Vector3 (0,0,0))

immediately after creating the camera.

Another suggestion is to execute the code snippet below and analyze it for any clues:

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(
45,// Field of view
w/h,// Aspect ratio
0.1,// Near
10000// Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x808080 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x00FFFF );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0xFF00FF );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
  
var sphereGeom = new THREE.SphereGeometry(5,16,16);
for(var i=0;i<sphereGeom.vertices.length;i++){
  var v = sphereGeom.vertices[i];
  if(v.y<0) v.y=0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial( { color: 0x808080 } );
var mesh = new THREE.Mesh( sphereGeom, material );
scene.add( mesh );
renderer.setClearColor( 0xdddddd, 1);


(function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer 2

It seems like your camera might be starting inside the cube.

To address this issue, you can try the following:

camera.position.set (0,0,1000)

Additionally, you can also consider adding:

camera.lookAt (new THREE.Vector3 (0,0,0))

immediately after creating the camera.

Another suggestion is to execute the code snippet below and analyze it for any clues:

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(
45,// Field of view
w/h,// Aspect ratio
0.1,// Near
10000// Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x808080 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x00FFFF );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0xFF00FF );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
  
var sphereGeom = new THREE.SphereGeometry(5,16,16);
for(var i=0;i<sphereGeom.vertices.length;i++){
  var v = sphereGeom.vertices[i];
  if(v.y<0) v.y=0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial( { color: 0x808080 } );
var mesh = new THREE.Mesh( sphereGeom, material );
scene.add( mesh );
renderer.setClearColor( 0xdddddd, 1);


(function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer 3

Answer №2

It appears that there is a typo in your code snippet. The opening <style> tag is incorrect:

<title>My first Three.js app</title> &lt;style>canvas { width: 100%; height: 100% }</style>

The correct code should be:

<title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style>

This typo may be causing the text to display on the page instead of the expected canvas element. This could be why the canvas appears as 0x0 and the cube is not visible.

Try adjusting the style tag as suggested to see if that resolves the issue.

Additionally, setting the body tag to 100% height may also be necessary for the document to have proper dimensions. You could try using this updated style tag:

<style>
  html, body { height: 100%; width: 100%; }
  canvas { width: 100%; height: 100% }
</style>

Answer 4

It appears that there is a typo in your code snippet. The opening <style> tag is incorrect:

<title>My first Three.js app</title> &lt;style>canvas { width: 100%; height: 100% }</style>

The correct code should be:

<title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style>

This typo may be causing the text to display on the page instead of the expected canvas element. This could be why the canvas appears as 0x0 and the cube is not visible.

Try adjusting the style tag as suggested to see if that resolves the issue.

Additionally, setting the body tag to 100% height may also be necessary for the document to have proper dimensions. You could try using this updated style tag:

<style>
  html, body { height: 100%; width: 100%; }
  canvas { width: 100%; height: 100% }
</style>

Answer 5

Answer №3

I finally figured out my mistake: I had been referencing the three.js file incorrectly.

Instead of:

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

I should have used:

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

Answer 6

I finally figured out my mistake: I had been referencing the three.js file incorrectly.

Instead of:

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

I should have used:

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

Feeling lost on the intricacies of threejs functionality

Answer №1

Answer №2

Answer №3

Similar questions

Why don't media queries take effect

Are there any reliable PHP classes available to generate HTML tables efficiently?

Ignored are the white spaces within a pre tag

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

Steps to display an angled bracket to indicate a line break

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

Prevent scrolling within input field

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

Why might a responsive website automatically switch to mobile view?

How to import a template from a different webpage in AngularJS

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

How can one execute a function within an HTML attribute value using Angular?

The filter is displaying incorrect categories

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

javascript the unseen element becomes visible upon page loading

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

Tips for extracting title and image from someone else's blog posts to share on your own website

When comparing the Raspberry command line editor 'Nano' to LeafPad for editing a text file string, it leads to issues where PHP cannot interpret the string accurately

Universal compatibility for web displays