Hello I try to resolve the follow exercise about 3D car model (GLTF). I created the html index but this didin´t run.
I considered introduce the OrbitControls.js and GLTFLoader.js. I apreciated any help.
DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script src="three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
Do you mind explaining in more detail what this means? Do you see any warnings or error messages in the browser console? Also please share scene.gltf in this topic.
I am new to programming, I am a 3D modeler and I was trying to import a 3D model in GLTF or GLB format to open it in the browser, but I am having problems using NODE and PARCEL (I saw it in a Youtube tutorial) untitled.glb (4.9 MB)
The error that appears when installing the Node and the Parcel is the following:
PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model> npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup [
npm WARN cleanup ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node_modules\@parcel\core\node_modules’,
npm WARN cleanup [Error: EBUSY: resource busy or locked, rmdir ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node_modules@parcel\core\node_modules\lmdb’] {
npm WARN cleanup errno: -4082,
npm WARN cleanup code: ‘EBUSY’,
npm WARN cleanup syscall: ‘rmdir’,
npm WARN cleanup path: ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node_modules\@parcel\core\node_modules\lmdb’
npm WARN cleanup }
npm WARN cleanup ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node_modules\lmdb
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp-build
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.3.1
npm ERR! gyp info using node@18.16.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.11.3 found at “C:\Python311\python.exe”
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS checking VS2019 (16.11.33529.622) found at:
npm ERR! gyp ERR! find VS “C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools”
npm ERR! gyp ERR! find VS - found “Visual Studio C++ core features”
npm ERR! gyp ERR! find VS - found VC++ toolset: v142
npm ERR! gyp ERR! find VS - missing any Windows SDK
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **********************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the “Desktop development with C++” workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS GitHub - nodejs/node-gyp: Node.js native addon build tool
npm ERR! gyp ERR! find VS **********************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:369:14)
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:390:16
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:427:5)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “rebuild”
npm ERR! gyp ERR! cwd C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node_modules\lmdb
npm ERR! gyp ERR! node -v v18.16.0
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USUARIO\AppData\Local\npm-cache_logs\2023-04-24T21_28_29_369Z-debug-0.log
PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model> npx parcel src/index.html
Need to install the following packages:
parcel@2.8.3
Ok to proceed? (y)
History restored
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
added 192 packages, and audited 193 packages in 3m
80 packages are looking for funding
run npm fund for details
1 high severity vulnerability
To address all issues, run:
npm audit fix
Run npm audit for details.
PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model>