How to put a scene of a rotating cube, in a particular place on a web - page

I want to be able to have the cube, small in a little window in the web page
something like this https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html

place the renderer image of a cube in a

Final GUI.DAT CONTROLLER body { margin: 0; } canvas { width: 100%; height: 100%; display: block; }

I'm trying to get this cube inside a certain place in the web page, instead of taking up the whole window I see a lot of examples in the internet, but I can not get it to work, can you please help me out

A sample with a scene hosted inside a div. The div could be repositioned/resized as needed. Includes a method to make sure the intersections also happen at the right spot.

https://jsfiddle.net/amitlzkpa/nL5ftgbu/

Thank you amitlzkpa. In your example works! But I’m learning. I want to know what makes this example works. In my code I have is not working:
let container = document.getElementById(“threeScene”);
container.appendChild( renderer.domElement );
renderer.setSize(container.clientWidth, container.clientHeight);
const scene = new THREE.Scene();

  //const camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000 );
  const camera = new THREE.PerspectiveCamera( 40, container.clientWidth / container.clientHeight, 1, 10000 );
  const renderer = new THREE.WebGLRenderer();
  //renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  const animate = function () {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.z += 0.01;
    renderer.render( scene, camera );
  };
  animate();

I don’t know what is: container.clientWidth, container.clientHeight
I use : window.innerWidth, window.innerHeight

Could you help me please…

clientWidth is the value in pixels javascript gives you for a selected elements’ inner dimensions (excludes borders and includes paddings).
Example:
image
source

So when you nest it in some nested container you would want to resize your canvas based on the space the container gives you on the page.

Similarly window.innerWidth gives you the pixel width based on the size of the browser window (could be resized, maximised etc).

A lot of examples of threejs you might find on the internet use window.innerWidth as its easier to make up quick examples without having to deal with the container sizing nuances. Those properties are values pertaining to how the browser renders a page and we pass it down to threejs so it can size itself on the page appropriately.

Ok.So I guess I can use .clientWidth and now I know what that is. but why this code is still not working?
and should I use .clientWidth or windowWidth?

Final GUI.DAT CONTROLLER body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } .test{ padding: 40px; } #threeScene { width:360px; height:240px; }

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

Let's see how this works, we have a text that we will be using, and inside this I'm going to ave a div, to put the scene

all I see is this: http://songnes.com/g/g50.html

Thank you for all your help…

Can you tryb putting it up on jsfiddle or something similar?

Looking at the source from the page you linked.
It seems to be missing the methods that initializes the threejs scene.

If you look at the jsfiddle shared earlier, you’ll find the init and animate methods. They are necessary.

Thanks… Still there is something I don’t know how…
this is your example and it works: https://www.songnes.com/g/g58.html

I want to be able to add mine: https://www.songnes.com/g/g52.html

So, I need to “know” how to make the connections, to make my red cube, show in the window, just like your cube… could you please help me out to solve this problem, thank you for your time!

I’m not sure what you mean.
The second link doesn’t have the code (init, animate, run in div etc.) to make it work like that.
Why do you think that would work?

I have this page: https://www.songnes.com/gift/page5.html
please take a look.
In here I see the example three.js have in their fundamental lessons. It WORKS!
you can see the 3 cubes rotating.
but my three.js scene is not working.

in the code I have this…

one for threejs.org works!
and mine, it supposed to be the same idea, is not working

I have the eva.js file in the same server and path.
and also included this on top
import * as THREE from ‘https://threefundamentals.org/threejs/resources/r115/build/three.module.js’;

There must be something I’m doing wrong. I don’t think it should be that difficult to put my own examples on a page…

Please can you help me?

the scene I want to put in there is this: http://songnes.com/g/g31.html

page2 WORKS!

Great news!!! Finally I got this code to work!
I got the example from: amitlzkpa
and I did reverse engineer…
I started to take line by line, little by little until it works!!!
you can see the final result here: https://www.songnes.com/gift/page2.html
and the full code here: https://www.songnes.com/gift/page2.txt

For other people, who wants to do the same…

Is not easy. If you move one line before another: won’t work
if you not set the variable first: won’t work…
is tricky… but after 2 weeks! I got it to work with help from this forum, Thanks a lot!

1 Like