diff --git a/.gitignore b/.gitignore index 55371e5..108d7e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules -.vscode \ No newline at end of file +.vscode +models/word.bin +models/word.blend1 diff --git a/.gitignore b/.gitignore index 55371e5..108d7e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules -.vscode \ No newline at end of file +.vscode +models/word.bin +models/word.blend1 diff --git a/public/index.js b/public/index.js index f58f365..550532b 100644 --- a/public/index.js +++ b/public/index.js @@ -34,6 +34,7 @@ const canvasHeight = Math.floor(canvas.clientHeight); const scene = new THREE.Scene(); + scene.background = new THREE.Color(0x020202); const camera = new THREE.PerspectiveCamera(50, canvasWidth / canvasHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ @@ -41,8 +42,8 @@ antialias: true }); renderer.setSize(canvasWidth, canvasHeight); - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFSoftShadowMap; + // renderer.shadowMap.enabled = true; + // renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); @@ -66,35 +67,65 @@ 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}) - ); - plane.rotateX(-Math.PI/2); - plane.position.y = -1; - plane.receiveShadow = true; - scene.add(plane); + // const plane = new THREE.Mesh( + // new THREE.PlaneBufferGeometry(5, 5, 10, 10), + // new THREE.MeshPhongMaterial({color: 0xffffff}) + // ); + // plane.rotateX(-Math.PI/2); + // plane.position.y = -1; + // 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.receiveShadow = true; + word.rotation.set(0,0,0); word.position.set(-2,0,0); scene.add(word); - // renderer.gammaInput = true; - // renderer.gammaOutput = true; + /** @type {THREE.Object3D} */ + let clonedWord = null; + const randomScatter = (r) => (r || 5)*(Math.random()-0.5); + const wordCloud = []; + const wordGroup = new THREE.Group(); + + for(let i=0;i<100;i++) + { + clonedWord = word.clone(false); + clonedWord.position.set(randomScatter(),randomScatter(),randomScatter()); + clonedWord.rotation.set(randomScatter(Math.PI),randomScatter(Math.PI),randomScatter(Math.PI)); + clonedWord.scale.set(0.15,0.15,0.15); + wordGroup.add(clonedWord); + wordCloud.push(clonedWord); + } + scene.add(wordGroup); + + renderer.gammaInput = true; + renderer.gammaOutput = true; // const helper = new THREE.CameraHelper(light.shadow.camera); // scene.add(helper); + // renderer.render(scene, camera); + function animate(){ requestAnimationFrame(animate); word.rotation.x += 0.01; word.rotation.y += 0.01; cube.rotation.x += 0.01; cube.rotation.y -= 0.01; + + wordGroup.rotation.x -= 0.01; + wordGroup.rotation.y += 0.01; + + wordCloud.forEach(w => { + w.rotation.x += 0.02; + w.rotation.y += 0.02; + }); + renderer.render(scene, camera); } animate();