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:
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