Three.js - Import Models - Versionsgeschichte

Steff: /* Draco Compression */

2022-01-05T14:41:59Z

Draco Compression

Steff: /* Import Animations - komplettes Beispiel */

2022-01-05T14:35:29Z

Import Animations - komplettes Beispiel

Steff am 5. Januar 2022 um 14:23 Uhr

2022-01-05T14:23:31Z

134.3.241.3: /* Mehrere Children */

2022-01-05T11:47:59Z

Mehrere Children

134.3.241.3: /* Quickstart */

2022-01-05T11:44:14Z

Quickstart

134.3.241.3 am 5. Januar 2022 um 11:07 Uhr

2022-01-05T11:07:59Z

134.3.241.3 am 5. Januar 2022 um 11:06 Uhr

2022-01-05T11:06:53Z

134.3.241.3: /* Loader */

2022-01-05T10:52:47Z

Loader

134.3.241.3: /* Add the loaded model to our scene */

2022-01-05T10:52:16Z

Add the loaded model to our scene

134.3.241.3 am 5. Januar 2022 um 10:24 Uhr

2022-01-05T10:24:59Z

@@ Zeile 144: / Zeile 144: @@
 === Draco Compression ===
 * Benötigt den Dracoloader
 * As we saw when browsing the files, the Draco version can be much lighter than the default version. Compression is applied to the buffer data (typically the geometry). It doesn't matter if you are using the default glTF, the binary glTF or the embedded glTF.
 * It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.
 * Google develops the algorithm under the open-source Apache License
 == Import Animations ==

@@ Zeile 148: / Zeile 148: @@
 * Google develops the algorithm under the open-source Apache License
-== Import Animations - komplettes Beispiel ==
+== Import Animations ==
 <syntaxhighlight lang="javascript">
 import './style.css'

← Nächstältere Version		Version vom 5. Januar 2022, 14:23 Uhr
Zeile 147:		Zeile 147:
	* It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.		* It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.
	* Google develops the algorithm under the open-source Apache License		* Google develops the algorithm under the open-source Apache License
		+
		+	== Import Animations - komplettes Beispiel ==
		+	<syntaxhighlight lang="javascript">
		+	import './style.css'
		+	import * as THREE from 'three'
		+	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
		+	import * as dat from 'lil-gui'
		+
		+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
		+	import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
		+
		+	// Debug
		+	const gui = new dat.GUI()
		+
		+	// Canvas
		+	const canvas = document.querySelector('canvas.webgl')
		+
		+	// Scene
		+	const scene = new THREE.Scene()
		+
		+	// Animation Mixer
		+	let mixer = null
		+
		+	/**
		+	* Models
		+	* */
		+
		+	// draco loader will only be loaded if needed by three.js
		+	const dracoLoader = new DRACOLoader()
		+	dracoLoader.setDecoderPath("/draco/") // get webassembly version (faster)
		+
		+	const gltfLoader = new GLTFLoader()
		+	gltfLoader.setDRACOLoader(dracoLoader)
		+	gltfLoader.load(
		+	'/models/Fox/glTF/Fox.gltf',
		+	(gltf) => {
		+	console.log(gltf) //success - show what we got
		+
		+	mixer = new THREE.AnimationMixer(gltf.scene)
		+	const action = mixer.clipAction(gltf.animations[0])
		+	action.play()
		+	console.log(action)
		+
		+	gltf.scene.scale.set(0.025,0.025,0.025)
		+	scene.add(gltf.scene)
		+	},
		+	() => {console.log('progress')},
		+	(error) => {console.log(error)}
		+	)
		+
		+
		+	/**
		+	* Floor
		+	*/
		+	const floor = new THREE.Mesh(
		+	new THREE.PlaneGeometry(10, 10),
		+	new THREE.MeshStandardMaterial({
		+	color: '#444444',
		+	metalness: 0,
		+	roughness: 0.5
		+	})
		+	)
		+	floor.receiveShadow = true
		+	floor.rotation.x = - Math.PI * 0.5
		+	scene.add(floor)
		+
		+	/**
		+	* Lights
		+	*/
		+	const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
		+	scene.add(ambientLight)
		+
		+	const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
		+	directionalLight.castShadow = true
		+	directionalLight.shadow.mapSize.set(1024, 1024)
		+	directionalLight.shadow.camera.far = 15
		+	directionalLight.shadow.camera.left = - 7
		+	directionalLight.shadow.camera.top = 7
		+	directionalLight.shadow.camera.right = 7
		+	directionalLight.shadow.camera.bottom = - 7
		+	directionalLight.position.set(5, 5, 5)
		+	scene.add(directionalLight)
		+
		+	/**
		+	* Sizes
		+	*/
		+	const sizes = {
		+	width: window.innerWidth,
		+	height: window.innerHeight
		+	}
		+
		+	window.addEventListener('resize', () =>
		+	{
		+	// Update sizes
		+	sizes.width = window.innerWidth
		+	sizes.height = window.innerHeight
		+
		+	// Update camera
		+	camera.aspect = sizes.width / sizes.height
		+	camera.updateProjectionMatrix()
		+
		+	// Update renderer
		+	renderer.setSize(sizes.width, sizes.height)
		+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
		+	})
		+
		+	/**
		+	* Camera
		+	*/
		+	// Base camera
		+	const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
		+	camera.position.set(2, 2, 2)
		+	scene.add(camera)
		+
		+	// Controls
		+	const controls = new OrbitControls(camera, canvas)
		+	controls.target.set(0, 0.75, 0)
		+	controls.enableDamping = true
		+
		+	/**
		+	* Renderer
		+	*/
		+	const renderer = new THREE.WebGLRenderer({
		+	canvas: canvas
		+	})
		+	renderer.shadowMap.enabled = true
		+	renderer.shadowMap.type = THREE.PCFSoftShadowMap
		+	renderer.setSize(sizes.width, sizes.height)
		+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
		+
		+	/**
		+	* Animate
		+	*/
		+	const clock = new THREE.Clock()
		+	let previousTime = 0
		+
		+	const tick = () =>
		+	{
		+	const elapsedTime = clock.getElapsedTime()
		+	const deltaTime = elapsedTime - previousTime
		+	previousTime = elapsedTime
		+
		+	// Update mixer
		+	if(mixer != null){
		+	mixer.update(deltaTime)
		+	}
		+
		+
		+	// Update controls
		+	controls.update()
		+
		+	// Render
		+	renderer.render(scene, camera)
		+
		+	// Call tick again on the next frame
		+	window.requestAnimationFrame(tick)
		+	}
		+
		+	tick()
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 5. Januar 2022, 11:47 Uhr
Zeile 141:		Zeile 141:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	=== Draco Compression ===
		+	* Benötigt den Dracoloader
		+	* As we saw when browsing the files, the Draco version can be much lighter than the default version. Compression is applied to the buffer data (typically the geometry). It doesn't matter if you are using the default glTF, the binary glTF or the embedded glTF.
		+	* It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.
		+	* Google develops the algorithm under the open-source Apache License

@@ Zeile 10: / Zeile 10: @@
      () => {console.log('success')},
      () => {console.log('progress')},
-     () => {console.log('error')}
+     (error) => {console.log(error)}
+)
 </syntaxhighlight>

← Nächstältere Version		Version vom 5. Januar 2022, 11:07 Uhr
Zeile 15:		Zeile 15:

	== Links ==		== Links ==
		+	[[ThreeJS - Snippets]]
	https://threejs-journey.com/lessons/23 - englischsprachige Teile in diesem Artikel und Beispiele		https://threejs-journey.com/lessons/23 - englischsprachige Teile in diesem Artikel und Beispiele

@@ Zeile 117: / Zeile 117: @@
-Vorsicht wenn es mehrere Children gibt die man alle importieren möchte:
+=== Mehrere Children ===
-Diese Lösung funktioniert nicht richtig. Bei jedem add werden der gltf Scene Objekte entnommen und das Array verkürzt sich. Der Index der Schleife bleibt aber gleich, daher werden Objekte ausgelassen.
+Die erste Lösung funktioniert nicht richtig. Bei jedem Schleifendurchlauf wird das Element aus dem (besonderen) gltf Array entnommen. Das Array verkürzt sich. Der Index der Schleife bleibt aber gleich, daher werden Objekte ausgelassen.
 <syntaxhighlight lanl="javascript">
 // NOT WORKING
@@ Zeile 128: / Zeile 129: @@
 while(gltf.scene.children.length){
    scene.add(gltf.scene.children[0])
+}
 // WORKING TOO

@@ Zeile 106: / Zeile 106: @@
 Because our model structure is simple, we will add the Object3D to our scene, and ignore the unused PerspectiveCamera inside. In future lessons, we will add the whole scene as one object
-<syntaxhighlight lanl="javascript">
+<syntaxhighlight lanG="javascript">
 gltfLoader.load(
      '/models/Duck/glTF/Duck.gltf',
@@ Zeile 133: / Zeile 133: @@
    scene.add(gltf.scene.children[0])
+}

← Nächstältere Version		Version vom 5. Januar 2022, 10:52 Uhr
Zeile 115:		Zeile 115:
	)		)
	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	Vorsicht wenn es mehrere Children gibt die man alle importieren möchte:
		+
		+	Diese Lösung funktioniert nicht richtig. Bei jedem add werden der gltf Scene Objekte entnommen und das Array verkürzt sich. Der Index der Schleife bleibt aber gleich, daher werden Objekte ausgelassen.
		+	<syntaxhighlight lanl="javascript">
		+	// NOT WORKING
		+	for(const child of gltf.scene.children){ // not working properly
		+	scene.add(child)
		+	}
		+	// WORKING
		+	while(gltf.scene.children.length){
		+	scene.add(gltf.scene.children[0])
		+	}
		+	// WORKING TOO
		+	for(let i = gltf.scene.children.length; i > 0; i--){
		+	scene.add(gltf.scene.children[0])
		+	}

← Nächstältere Version		Version vom 5. Januar 2022, 10:24 Uhr
Zeile 15:		Zeile 15:

	== Links ==		== Links ==
		+	https://threejs-journey.com/lessons/23 - englischsprachige Teile in diesem Artikel und Beispiele

	Others		Others