Im new to three.js. Im stuck at GLTFLoader. I have downloaded the GLTFLoader externally and with threes package also. But still it is not imported. I don't know why

[Gurudath]

import ‘./style/main.css’
import * as THREE from ‘three’
import { ARButton } from ‘./ARbutton’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’
import { Loader, Mesh, SphericalHarmonics3, TetrahedronGeometry } from ‘three’
import {GLTFLoader} from ‘…/src/GLTFLoader.js’

function init(){

// container to add all the models , camera, scene etc
const container=document.createElement(‘div’);
document.body.append(container);

//create a scene
const scene=new THREE.Scene();

//create camera

const camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.01,40);

const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
light.position.set(0.5, 1, 0.25);
scene.add(light);

const renderer=new THREE.WebGLRenderer({antialias:true,alpha:true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.xr.enabled = true; // New!
container.appendChild(renderer.domElement);
document.body.appendChild(ARButton.createButton(renderer));
window.addEventListener(‘resize’, onWindowResize, false);

const loader=THREE.GLTFLoader();

loader.load(
‘…/src/assets/biggltf/scene.glb’,

function (gltf) {

    scene.add(gltf.scene);

console.log(“Model added to scene”);

},

function (xhr) {

},

function (error) {
    console.error(error);
}

);

//to animate
function animate()
{
renderer.setAnimationLoop(render);
}
function render(){

renderer.render(scene,camera);

}

//if window is resized

function onWindowResize(){
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}

onWindowResize();

animate();
}
init();

[drcmda]

import ‘./style/main.css’
import * as THREE from ‘three’
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’
import { ARButton } from ‘./ARbutton’

loader.load(
‘…/src/assets/biggltf/scene.glb’,

i’m afraid that is not a path. you can’t leave the src/ folder, you can’t load from the src/ folder, because that folder does not exist, it is virtual/dev-only. your model has to be in public/assets/biggltf/ and the url then becomes /assets/biggltf/scene.glb

[Gurudath]

I didn’t get u sir, coz im new to three.js, but now even if I remove the model ie gltf and try to import GLTF and write console.log(gltf). still its showing its not a constructor or something else sir

[drcmda]

make sure you are using a bundler. use vite (npm create vite). then npm install three. start your dev environment npm run dev and now the above code will work.

[Gurudath]

I tried it sir but installed vite and rpm create site, asked for some stuff I selected vanilla and javascript. but after that when I run npm install three . start , im getting error is in terminal

gurudath@GURUDATHs-MacBook-Air webpack-three-js-template % npm install three. start
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: copy-webpack-plugin@11.0.0
npm ERR! Found: webpack@4.43.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@“>=2” from babel-loader@8.1.0
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader@“^8.1.0” from the root project
npm ERR! peer webpack@“*” from clean-webpack-plugin@3.0.0
npm ERR! node_modules/clean-webpack-plugin
npm ERR! dev clean-webpack-plugin@“^3.0.0” from the root project
npm ERR! 11 more (css-loader, file-loader, html-loader, …)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@“^5.1.0” from copy-webpack-plugin@11.0.0
npm ERR! node_modules/copy-webpack-plugin
npm ERR! dev copy-webpack-plugin@“^11.0.0” from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.75.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@“^5.1.0” from copy-webpack-plugin@11.0.0
npm ERR! node_modules/copy-webpack-plugin
npm ERR! dev copy-webpack-plugin@“^11.0.0” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/gurudath/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/gurudath/.npm/_logs/2023-01-01T13_13_58_332Z-debug-0.log

when I run npm run dev, before it was working but now its showing errors . ie

gurudath@GURUDATHs-MacBook-Air webpack-three-js-template % npm run dev

webpack-three-js-template@1.0.0 dev
webpack-dev-server --config ./bundler/webpack.dev.js

/Users/gurudath/webpack-three-js-template/node_modules/copy-webpack-plugin/node_modules/schema-utils/dist/validate.js:115
throw new _ValidationError.default(errors, schema, configuration);
^

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

• options[0] has an unknown property ‘from’. These properties are valid:
  object { patterns, options? }
  at validate (/Users/gurudath/webpack-three-js-template/node_modules/copy-webpack-plugin/node_modules/schema-utils/dist/validate.js:115:11)
  at new CopyPlugin (/Users/gurudath/webpack-three-js-template/node_modules/copy-webpack-plugin/dist/index.js:172:5)
  at Object. (/Users/gurudath/webpack-three-js-template/bundler/webpack.common.js:15:9)
  at Module._compile (node:internal/modules/cjs/loader:1159:14)
  at Module._extensions…js (node:internal/modules/cjs/loader:1213:10)
  at Module.load (node:internal/modules/cjs/loader:1037:32)
  at Module._load (node:internal/modules/cjs/loader:878:12)
  at Module.require (node:internal/modules/cjs/loader:1061:19)
  at require (node:internal/modules/cjs/helpers:103:18)
  at Object. (/Users/gurudath/webpack-three-js-template/bundler/webpack.dev.js:2:29) {
  errors: [
  {
  instancePath: ‘[0]’,
  schemaPath: ‘#/additionalProperties’,
  keyword: ‘additionalProperties’,
  params: { additionalProperty: ‘from’ },
  message: ‘must NOT have additional properties’,
  schema: false,
  parentSchema: {
  definitions: {
  ObjectPattern: {
  type: ‘object’,
  additionalProperties: false,
  properties: [Object],
  required: [Array]
  },
  StringPattern: { type: ‘string’, minLength: 1 }
  },
  type: ‘object’,
  additionalProperties: false,
  properties: {
  patterns: { type: ‘array’, minItems: 1, items: [Object] },
  options: {
  type: ‘object’,
  additionalProperties: false,
  properties: [Object]
  }
  },
  required: [ ‘patterns’ ]
  },
  data: { from: ‘/Users/gurudath/webpack-three-js-template/static’ },
  children: [
  {
  instancePath: ‘[0]’,
  schemaPath: ‘#/required’,
  keyword: ‘required’,
  params: { missingProperty: ‘patterns’ },
  message: “must have required property ‘patterns’”,
  schema: [ ‘patterns’ ],
  parentSchema: {
  definitions: [Object],
  type: ‘object’,
  additionalProperties: false,
  properties: [Object],
  required: [Array]
  },
  data: { from: ‘/Users/gurudath/webpack-three-js-template/static’ },
  children: undefined
  }
  ]
  }
  ],
  schema: {
  definitions: {
  ObjectPattern: {
  type: ‘object’,
  additionalProperties: false,
  properties: {
  from: {
  type: ‘string’,
  description: ‘Glob or path from where we copy files.’,
  link:
  minLength: 1
  },
  to: {
  anyOf: [Array],
  description: ‘Output path.’,
  link:
  },
  context: {
  type: ‘string’,
  description: “A path that determines how to interpret the ‘from’ path.”,
  link: ’
  },
  globOptions: {
  type: ‘object’,
  description: ‘Allows to configute the glob pattern matching library used by the plugin.’,
  link:
  },
  filter: {
  instanceof: ‘Function’,
  description: ‘Allows to filter copied assets.’,
  link:
  },
  transformAll: {
  instanceof: ‘Function’,
  description: ‘Allows you to modify the contents of multiple files and save the result to one file.’,
  link: ‘GitHub - webpack-contrib/copy-webpack-plugin: Copy files and directories with webpack’
  },
  toType: {
  enum: [Array],
  description: ‘Determinate what is to option - directory, file or template.’,
  link:
  },
  force: {
  type: ‘boolean’,
  description: “Overwrites files already in ‘compilation.assets’ (usually added by other plugins/loaders).”,
  link:
  },
  priority: {
  type: ‘number’,
  description: ‘Allows to specify the priority of copying files with the same destination name.’,
  link:
  },
  info: {
  anyOf: [Array],
  description: ‘Allows to add assets info.’,
  link:
  },
  transform: {
  description: ‘Allows to modify the file contents.’,
  link:
  anyOf: [Array]
  },
  noErrorOnMissing: {
  type: ‘boolean’,
  description: “Doesn’t generate an error on missing file(s).”,

     }
   },
   required: [ 'from' ]
  

  },
  StringPattern: { type: ‘string’, minLength: 1 }
  },
  type: ‘object’,
  additionalProperties: false,
  properties: {
  patterns: {
  type: ‘array’,
  minItems: 1,
  items: { anyOf: [ [Object], [Object] ] }
  },
  options: {
  type: ‘object’,
  additionalProperties: false,
  properties: {
  concurrency: {
  type: ‘number’,
  description: ‘Limits the number of simultaneous requests to fs.’,

     }
   }
  

  }
  },
  required: [ ‘patterns’ ]
  },
  headerName: ‘Copy Plugin’,
  baseDataPath: ‘options’,
  postFormatter: null
  }

I used npm i --save three-gltf-loader. this command after this npm run dev is also not working

[Gurudath]

I the code above I have removed links bcz I was not able to send it bcz im new to threes.forum sir

[drcmda]

you do not need to install gltfloader, it is part of threejs. im not sure what are all these messages, vite has nothing to do with webpack, which you do not need.

[hofk]

If you’re new, simple examples may help.

See from the collection

BeginnerExample step 03:
Christmas 2021

Read the documents on this topic at * discourse.threejs.hofk.de

[Gurudath]

let me give it a try sir