Add 3D Model into div tag in carousel WebSite

Questions
1

I’m a beginner to three.js and I’m trying to insert a 3D model into the 1st div tag of the carousel on my website: https://www.anthonyplatinumprogramming.app/

I already try replicating other tutorials videos on youtube like this one: Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial - YouTube

and nothing works at a minimal to at least to make the model appear; I have debugged and fixed the error each time and have not been to make the 3D model to at least appear.

Any help would be appreciated please
my source code: GitHub - TonyStarkWiz/APP_Website

1 Like
2

You need to assign the canvas.

See BeginnerExample

(from Collection of examples from discourse.threejs.org)


<div id= "container" class="main"></div>

const container = document.getElementById( 'container' );

		// https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x0099ff, 1 );	
// const container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
3

I have my div tag to id my carouselItem:
:

4

You have written only the JavaScript in the DIV <div id=“item1” … .

5

could you elaborate, sorry for being a newbie

6

see also three.js examples
and
three.js examples

Here you have two DIV’s with extra renderer etc.
ConstructionBasis


<body>
<div class="container">
	<div class="comp containerA"></div>	
	<div class="slider"> </div>
	<div class="comp containerB"></div>
</div>
</body>

containerA = document.querySelector( '.containerA' );
containerB = document.querySelector( '.containerB' );
slider = document.querySelector( '.slider' );


// create  scenes
sceneA = new THREE.Scene();
sceneA.background = new THREE.Color( 0x555555 );
sceneB = new THREE.Scene();
sceneB.background = new THREE.Color( 0xeeeeee );



// renderer 
rendererA = new THREE.WebGLRenderer( { antialias: true } );
rendererA.setSize( containerA.clientWidth, containerA.clientHeight );
rendererA.setPixelRatio( window.devicePixelRatio ) 
containerA.appendChild( rendererA.domElement );
rendererB = new THREE.WebGLRenderer( { antialias: true } );
rendererB.setSize( widthB, heightB );
rendererB.setPixelRatio( window.devicePixelRatio );
containerB.appendChild( rendererB.domElement );
7

Try it so

2021-11-26 22.07.41
2021-11-26 22.07.41577×707 64.5 KB 


<!DOCTYPE html>
<!--https://discourse.threejs.org/t/add-3d-model-into-div-tag-in-carousel-website/32127/5 -->
<head>
	<title> Template2DIV </title>
	<meta charset="utf-8" />
	<style>
        body {
        margin: 0;
        overflow: hidden;
        }
 
        #container1 {
        position: absolute;
        top: 40px;
        left: 20px;
        width: 500px;
        height: 300px;
        }
 
        #container2 {
        position:absolute;
        top: 400px;
        left: 60px;
        width: 400px;
        height: 250px;
        }
      
	</style>
</head>
<body>
<div>
  <div id="container1"></div>
  <div id="container2"></div> 
</div>
</body>

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

// @author hofk

const container1 = document.getElementById( 'container1' );
const scene1 = new THREE.Scene();
const camera1 = new THREE.PerspectiveCamera( 60, 500/ 300, 0.01, 1000 );
camera1.position.set( 0, 1, 5 );
const renderer1 = new THREE.WebGLRenderer( { antialias: true } );
renderer1.setClearColor( 0xdedede, 1 );
renderer1.setSize( 500, 300 );
renderer1.setPixelRatio( window.devicePixelRatio ) 
container1.appendChild( renderer1.domElement );

const material1 = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true, side: THREE.DoubleSide  } );
const geometry1 = new THREE.CylinderGeometry( 1, 1, 2, 18 );
const cylinder = new THREE.Mesh( geometry1, material1 );
scene1.add( cylinder );
 
const container2 = document.getElementById( 'container2' );	
const scene2 = new THREE.Scene();
const camera2 = new THREE.PerspectiveCamera( 65, 400 / 250, 0.05, 10000 );
camera2.position.set( 0, 0, 2 );
const renderer2 = new THREE.WebGLRenderer( { antialias: true } );
renderer2.setClearColor( 0xffee22, 1 );
renderer2.setSize( 400, 250 );
renderer2.setPixelRatio( window.devicePixelRatio );
container2.appendChild( renderer2.domElement );

const material2 = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, side: THREE.DoubleSide  } );
const geometry2 = new THREE.SphereGeometry( );
const sphere = new THREE.Mesh( geometry2, material2 );
scene2.add( sphere );
 
animate( );

function animate( ) {

	requestAnimationFrame( animate );	
	renderer1.render( scene1, camera1 );
	renderer2.render( scene2, camera2 );
    
}
</script>

</html>
8

If I understand your question correctly, you want your 3D model to float around between and similar to the carousel div’s?
Then maybe you should use a full screen canvas, and use Css3dObjects for the panels containing Html. Html - even presented as 3d - does not mix easily with 3D objects. They have separate containers. The Css3dObject tricks them to be sort of mixed.

9

I took a closer look at your code.
Already the integration of three.js is not correct.
You want to read in module variants as a simple script.

<script src="https://github.com/mrdoob/three.js/blob/e1ead8c5c2eb2395942f5e7d9af7240befc5d729/examples/jsm/loaders/GLTFLoader.js </script>

You must use the js directory instead of jsm. Take a look at some examples in the collection. Call also the above links to JSFiddle.

js
FlashlightBeam

jsm
ObjectsFollowCurve

11

sorry for not replying but had to practice for job interviews
Thank you so much for your help in addressing my problem @hofk & others but what I’m immensely confuse is how to incorporate your advices into my already exist code. When I follow adding a canvas in one of your reply it still did not work. If you could rewritte your advices as a Step1-StepN it would be greatly appreciated.

12

This is not so easy, because their site embeds several foreign scripts and their common behavior is not familiar to me.

You should try to build your project step by step, looking at how three.js can be integrated with its loaders.