I was able to import the GLTF loader but it gives be this error that just keeps running forever when I add my object. :error:
THREE.WebGLInfo: Unknown draw mode: undefined
I searched it up and nothing came up, I don’t know what I can do
this is my script:
<html>
<head>
<meta charset=utf-8>
<title>Maze</title>
<script src="https://three.js.org/build/three.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
<script type="module">
// SOMGOLIE EJINKEONYE COSC3306 ASSIGNMENT 2
// Import the Three.js module
import * as THREE from 'https://unpkg.com/three@0.111.0/build/three.module.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
//import { OrbitControls } from 'three/addons/Controls/OrbitControls.js';
window.onload = function() { // one big function for all our JavaScript code
//Define the WebGL renderer:
var object;
const loader = new GLTFLoader();
loader.load( 'Pot Plant.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
});
var renderer = new THREE.WebGLRenderer(); // Specify the use of WebGL
renderer.setSize(1520, 750); // Scene size (Width, Height)
document.body.appendChild(renderer.domElement);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//Initialize (create) the scene:
var scene = new THREE.Scene();
//THE CAMERA
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.x= 0; //default value anyway
camera.position.y= 0; //default value anyway
camera.position.z = 100; //We move the camera backwards to see all the scene
camera.lookAt(scene.position);
var object0
// creating the terrain
var terrainGeometry = new THREE.PlaneGeometry(600, 620, 199, 199);
var terrainMaterial = new THREE.MeshLambertMaterial({ color: "brown" }); // Brown color
var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
terrain.castShadow=false;
terrain.receiveShadow=true;
terrain.rotation.x +=250
terrain.position.y -=15
scene.add(terrain);
//lights
var pointLight = new THREE.PointLight(0xFFFFFF);
// set the light position:
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 100;
// add the light to the scene:
scene.add(pointLight);
//the skydome
var geometry =new THREE.SphereGeometry(100,60,80);
var texture = new THREE.TextureLoader().load('bluesky.png');
var material = new THREE.MeshBasicMaterial({map:texture});
material.side =THREE.BackSide;
var skydome = new THREE.Mesh(geometry,material);
var geometry = new THREE.BoxGeometry( 6, 16, 6 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube = new THREE.Mesh(geometry,material);
cube.castShadow=true;
cube.receiveShadow=false;
cube.translateX(10);
cube.translateZ(70);
scene.add(cube);
var geometry = new THREE.BoxGeometry( 6, 16, 6 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube2 = new THREE.Mesh(geometry,material);
cube2.castShadow=true;
cube2.receiveShadow=true;
cube2.translateX(-10);
cube2.translateZ(70);
//scene.add(cube2);
var geometry = new THREE.BoxGeometry( 16, 16, 16 );
//It defines colour green:
var texture2 = new THREE.TextureLoader().load('check.jpg');
var material = new THREE.MeshLambertMaterial( {map:texture2} );
var cube3 = new THREE.Mesh(geometry,material);
cube3.castShadow=true;
cube3.receiveShadow=true;
cube3.translateX(5);
cube3.translateZ(50);
//scene.add(cube3);
// adding the skydome
scene.add( skydome );
//the fog 0.007 is the intensity
const light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false
//Set up shadow properties for the light
light.shadow.mapSize.width = 12; // default
light.shadow.mapSize.height = 12; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 50; // default
light.shadow.focus = 1; // default
scene.add( light );
const spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); spotLight.map = new THREE.TextureLoader().load( "https://threejs.org/examples/#webgl_lights_spotlights" ); spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 500; spotLight.shadow.camera.far = 4000; spotLight.shadow.camera.fov = 30; scene.add( spotLight );
//render the skydome
function render(){
requestAnimationFrame(render);
renderer.render( scene, camera );
}
render();
}; // onload function
</script>
</head>
<body></body>
</html>
I’m required to use notepad++ and serverz :
How can I add the object to the scene?
