Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven't found a solution. If anyone could provide some guidance or assistance, it would be greatly appreciated.
Below is the code for my three.js scene:
<script src="three.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script type="module">
import {GLTFLoader } from "./GLTFLoader.js"
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xd3d2cd)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(1, 0.7, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new GLTFLoader();
var obj;
loader.load("model.gltf", function (gltf) { obj = gltf.scene; scene.add(gltf.scene);});
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 2);
hemiLight.color.setHSL(197, 71, 73 );
hemiLight.groundColor.setHSL(197, 71, 73);
hemiLight.position.set( 0, 0, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xfdfbd3, 1);
dirLight.color.setHSL(55, 95, 57);
dirLight.position.set( 0, 1.75, .5 );
dirLight.position.multiplyScalar( 20 );
scene.add( dirLight );
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
</script>
I want to mention that I am relatively new to JavaScript and programming in general. It's only been a few weeks since I started learning these concepts. Any help provided would be highly valued. Additionally, please forgive any errors in my English as it is not my first language.
Thank you. Twyn.