diff --git a/app.js b/app.js
index c4fd479..0777382 100644
--- a/app.js
+++ b/app.js
@@ -9,8 +9,9 @@
app.disable("x-powered-by");
app.use("/style", express.static(path.join(__dirname, "style")));
-app.use("/models", express.static(path.join(__dirname, "style")));
+app.use("/models", express.static(path.join(__dirname, "models")));
app.use("/three", express.static(path.join(__dirname, "node_modules", "three", "build")));
+app.use("/loaders", express.static(path.join(__dirname, "node_modules", "three", "examples", "js", "loaders")));
app.use("/", express.static(path.join(__dirname, "public")));
app.listen(app.get("port"), () => console.log("Started..."));
\ No newline at end of file
diff --git a/app.js b/app.js
index c4fd479..0777382 100644
--- a/app.js
+++ b/app.js
@@ -9,8 +9,9 @@
app.disable("x-powered-by");
app.use("/style", express.static(path.join(__dirname, "style")));
-app.use("/models", express.static(path.join(__dirname, "style")));
+app.use("/models", express.static(path.join(__dirname, "models")));
app.use("/three", express.static(path.join(__dirname, "node_modules", "three", "build")));
+app.use("/loaders", express.static(path.join(__dirname, "node_modules", "three", "examples", "js", "loaders")));
app.use("/", express.static(path.join(__dirname, "public")));
app.listen(app.get("port"), () => console.log("Started..."));
\ No newline at end of file
diff --git a/models/word.blend b/models/word.blend
index 4220144..e41ae56 100644
--- a/models/word.blend
+++ b/models/word.blend
Binary files differ
diff --git a/app.js b/app.js
index c4fd479..0777382 100644
--- a/app.js
+++ b/app.js
@@ -9,8 +9,9 @@
app.disable("x-powered-by");
app.use("/style", express.static(path.join(__dirname, "style")));
-app.use("/models", express.static(path.join(__dirname, "style")));
+app.use("/models", express.static(path.join(__dirname, "models")));
app.use("/three", express.static(path.join(__dirname, "node_modules", "three", "build")));
+app.use("/loaders", express.static(path.join(__dirname, "node_modules", "three", "examples", "js", "loaders")));
app.use("/", express.static(path.join(__dirname, "public")));
app.listen(app.get("port"), () => console.log("Started..."));
\ No newline at end of file
diff --git a/models/word.blend b/models/word.blend
index 4220144..e41ae56 100644
--- a/models/word.blend
+++ b/models/word.blend
Binary files differ
diff --git a/models/word.gltf b/models/word.gltf
index 34984c6..f22c0fb 100644
--- a/models/word.gltf
+++ b/models/word.gltf
@@ -5,7 +5,7 @@
"componentType" : 5123,
"count" : 33132,
"max" : [
- 7382
+ 7396
],
"min" : [
0
@@ -15,23 +15,23 @@
{
"bufferView" : 1,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
- 2.692153215408325,
- 0.7004097700119019,
- 0.16599997878074646
+ 1.3641611337661743,
+ 0.441138356924057,
+ 0.16380390524864197
],
"min" : [
- 0.04797888919711113,
- -0.23900000751018524,
- -0.16599997878074646
+ -1.2800132036209106,
+ -0.4982714354991913,
+ -0.16819605231285095
],
"type" : "VEC3"
},
{
"bufferView" : 2,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
1.0,
0.999969482421875,
@@ -58,23 +58,37 @@
},
{
"buffer" : 0,
- "byteLength" : 88596,
+ "byteLength" : 88764,
"byteOffset" : 66264,
"target" : 34962
},
{
"buffer" : 0,
- "byteLength" : 88596,
- "byteOffset" : 154860,
+ "byteLength" : 88764,
+ "byteOffset" : 155028,
"target" : 34962
}
],
"buffers" : [
{
- "byteLength" : 243456,
+ "byteLength" : 243792,
"uri" : "word.bin"
}
],
+ "materials" : [
+ {
+ "name" : "Material.001",
+ "pbrMetallicRoughness" : {
+ "baseColorFactor" : [
+ 0.0030846458388067155,
+ 0.2540331163113283,
+ 0.640000066757203,
+ 1.0
+ ],
+ "metallicFactor" : 0.0
+ }
+ }
+ ],
"meshes" : [
{
"name" : "Mesh",
@@ -84,7 +98,8 @@
"NORMAL" : 2,
"POSITION" : 1
},
- "indices" : 0
+ "indices" : 0,
+ "material" : 0
}
]
}
@@ -94,10 +109,20 @@
"mesh" : 0,
"name" : "Text",
"rotation" : [
- 0.7071068286895752,
+ 0.7077234983444214,
0.0,
0.0,
- 0.7071068286895752
+ 0.7064895033836365
+ ],
+ "scale" : [
+ 1.0,
+ 0.9999999403953552,
+ 0.9999999403953552
+ ],
+ "translation" : [
+ 0.201999694108963,
+ -0.12234412133693695,
+ 0.284833699464798
]
}
],
diff --git a/app.js b/app.js
index c4fd479..0777382 100644
--- a/app.js
+++ b/app.js
@@ -9,8 +9,9 @@
app.disable("x-powered-by");
app.use("/style", express.static(path.join(__dirname, "style")));
-app.use("/models", express.static(path.join(__dirname, "style")));
+app.use("/models", express.static(path.join(__dirname, "models")));
app.use("/three", express.static(path.join(__dirname, "node_modules", "three", "build")));
+app.use("/loaders", express.static(path.join(__dirname, "node_modules", "three", "examples", "js", "loaders")));
app.use("/", express.static(path.join(__dirname, "public")));
app.listen(app.get("port"), () => console.log("Started..."));
\ No newline at end of file
diff --git a/models/word.blend b/models/word.blend
index 4220144..e41ae56 100644
--- a/models/word.blend
+++ b/models/word.blend
Binary files differ
diff --git a/models/word.gltf b/models/word.gltf
index 34984c6..f22c0fb 100644
--- a/models/word.gltf
+++ b/models/word.gltf
@@ -5,7 +5,7 @@
"componentType" : 5123,
"count" : 33132,
"max" : [
- 7382
+ 7396
],
"min" : [
0
@@ -15,23 +15,23 @@
{
"bufferView" : 1,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
- 2.692153215408325,
- 0.7004097700119019,
- 0.16599997878074646
+ 1.3641611337661743,
+ 0.441138356924057,
+ 0.16380390524864197
],
"min" : [
- 0.04797888919711113,
- -0.23900000751018524,
- -0.16599997878074646
+ -1.2800132036209106,
+ -0.4982714354991913,
+ -0.16819605231285095
],
"type" : "VEC3"
},
{
"bufferView" : 2,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
1.0,
0.999969482421875,
@@ -58,23 +58,37 @@
},
{
"buffer" : 0,
- "byteLength" : 88596,
+ "byteLength" : 88764,
"byteOffset" : 66264,
"target" : 34962
},
{
"buffer" : 0,
- "byteLength" : 88596,
- "byteOffset" : 154860,
+ "byteLength" : 88764,
+ "byteOffset" : 155028,
"target" : 34962
}
],
"buffers" : [
{
- "byteLength" : 243456,
+ "byteLength" : 243792,
"uri" : "word.bin"
}
],
+ "materials" : [
+ {
+ "name" : "Material.001",
+ "pbrMetallicRoughness" : {
+ "baseColorFactor" : [
+ 0.0030846458388067155,
+ 0.2540331163113283,
+ 0.640000066757203,
+ 1.0
+ ],
+ "metallicFactor" : 0.0
+ }
+ }
+ ],
"meshes" : [
{
"name" : "Mesh",
@@ -84,7 +98,8 @@
"NORMAL" : 2,
"POSITION" : 1
},
- "indices" : 0
+ "indices" : 0,
+ "material" : 0
}
]
}
@@ -94,10 +109,20 @@
"mesh" : 0,
"name" : "Text",
"rotation" : [
- 0.7071068286895752,
+ 0.7077234983444214,
0.0,
0.0,
- 0.7071068286895752
+ 0.7064895033836365
+ ],
+ "scale" : [
+ 1.0,
+ 0.9999999403953552,
+ 0.9999999403953552
+ ],
+ "translation" : [
+ 0.201999694108963,
+ -0.12234412133693695,
+ 0.284833699464798
]
}
],
diff --git a/public/index.html b/public/index.html
index 44d5c31..b791d45 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,7 @@
+
diff --git a/app.js b/app.js
index c4fd479..0777382 100644
--- a/app.js
+++ b/app.js
@@ -9,8 +9,9 @@
app.disable("x-powered-by");
app.use("/style", express.static(path.join(__dirname, "style")));
-app.use("/models", express.static(path.join(__dirname, "style")));
+app.use("/models", express.static(path.join(__dirname, "models")));
app.use("/three", express.static(path.join(__dirname, "node_modules", "three", "build")));
+app.use("/loaders", express.static(path.join(__dirname, "node_modules", "three", "examples", "js", "loaders")));
app.use("/", express.static(path.join(__dirname, "public")));
app.listen(app.get("port"), () => console.log("Started..."));
\ No newline at end of file
diff --git a/models/word.blend b/models/word.blend
index 4220144..e41ae56 100644
--- a/models/word.blend
+++ b/models/word.blend
Binary files differ
diff --git a/models/word.gltf b/models/word.gltf
index 34984c6..f22c0fb 100644
--- a/models/word.gltf
+++ b/models/word.gltf
@@ -5,7 +5,7 @@
"componentType" : 5123,
"count" : 33132,
"max" : [
- 7382
+ 7396
],
"min" : [
0
@@ -15,23 +15,23 @@
{
"bufferView" : 1,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
- 2.692153215408325,
- 0.7004097700119019,
- 0.16599997878074646
+ 1.3641611337661743,
+ 0.441138356924057,
+ 0.16380390524864197
],
"min" : [
- 0.04797888919711113,
- -0.23900000751018524,
- -0.16599997878074646
+ -1.2800132036209106,
+ -0.4982714354991913,
+ -0.16819605231285095
],
"type" : "VEC3"
},
{
"bufferView" : 2,
"componentType" : 5126,
- "count" : 7383,
+ "count" : 7397,
"max" : [
1.0,
0.999969482421875,
@@ -58,23 +58,37 @@
},
{
"buffer" : 0,
- "byteLength" : 88596,
+ "byteLength" : 88764,
"byteOffset" : 66264,
"target" : 34962
},
{
"buffer" : 0,
- "byteLength" : 88596,
- "byteOffset" : 154860,
+ "byteLength" : 88764,
+ "byteOffset" : 155028,
"target" : 34962
}
],
"buffers" : [
{
- "byteLength" : 243456,
+ "byteLength" : 243792,
"uri" : "word.bin"
}
],
+ "materials" : [
+ {
+ "name" : "Material.001",
+ "pbrMetallicRoughness" : {
+ "baseColorFactor" : [
+ 0.0030846458388067155,
+ 0.2540331163113283,
+ 0.640000066757203,
+ 1.0
+ ],
+ "metallicFactor" : 0.0
+ }
+ }
+ ],
"meshes" : [
{
"name" : "Mesh",
@@ -84,7 +98,8 @@
"NORMAL" : 2,
"POSITION" : 1
},
- "indices" : 0
+ "indices" : 0,
+ "material" : 0
}
]
}
@@ -94,10 +109,20 @@
"mesh" : 0,
"name" : "Text",
"rotation" : [
- 0.7071068286895752,
+ 0.7077234983444214,
0.0,
0.0,
- 0.7071068286895752
+ 0.7064895033836365
+ ],
+ "scale" : [
+ 1.0,
+ 0.9999999403953552,
+ 0.9999999403953552
+ ],
+ "translation" : [
+ 0.201999694108963,
+ -0.12234412133693695,
+ 0.284833699464798
]
}
],
diff --git a/public/index.html b/public/index.html
index 44d5c31..b791d45 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,7 @@
+
diff --git a/public/index.js b/public/index.js
index cc596c0..f58f365 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,8 +1,32 @@
///
+//
"use strict";
-document.addEventListener("DOMContentLoaded", function pageInit(){
+/**
+ * Loads a GLTF resource and retruns the data as a promise.
+ * @param {THREE.GLTFLoader} loader instance of the loader to use.
+ * @param {string} path URL from where to download.
+ * @returns {Promise<{scene: THREE.Scene}>}
+ */
+function downloadModel(loader, path)
+{
+ return new Promise(function(resolve, reject){
+ loader.load(
+ path,
+ function onLoadModel(gltf){
+ resolve(gltf);
+ },
+ null,
+ function(error){
+ reject(error);
+ }
+ );
+ });
+}
+
+
+document.addEventListener("DOMContentLoaded", async function pageInit(){
/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("playground");
@@ -25,6 +49,7 @@
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshPhongMaterial({color: 0x4512ff})
const cube = new THREE.Mesh(geometry, material);
+ cube.position.set(2,0,0);
cube.castShadow = true;
scene.add(cube);
@@ -33,8 +58,14 @@
const light = new THREE.PointLight(0xffffff, 1, 50);
light.position.set(5,5,5);
light.castShadow = true;
+ light.shadow.mapSize.width = 1024;
+ light.shadow.mapSize.height = 1024;
scene.add(light);
+ const backLight = new THREE.PointLight(0xffffff, 0.1, 50);
+ backLight.position.set(-5,5,5);
+ scene.add(backLight);
+
const plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(5, 5, 10, 10),
new THREE.MeshPhongMaterial({color: 0xffffff})
@@ -44,6 +75,14 @@
plane.receiveShadow = true;
scene.add(plane);
+ const loader = new THREE.GLTFLoader();
+
+ const wordGLTF = await downloadModel(loader, "models/word.gltf");
+ const word = wordGLTF.scene.children.find(c => c.name == "Text");
+ word.castShadow = true;
+ word.position.set(-2,0,0);
+ scene.add(word);
+
// renderer.gammaInput = true;
// renderer.gammaOutput = true;
@@ -52,8 +91,10 @@
function animate(){
requestAnimationFrame(animate);
+ word.rotation.x += 0.01;
+ word.rotation.y += 0.01;
cube.rotation.x += 0.01;
- cube.rotation.y += 0.01;
+ cube.rotation.y -= 0.01;
renderer.render(scene, camera);
}
animate();