From 1a5b5a2e1cf5705f6982636e8f57444643124152 Mon Sep 17 00:00:00 2001 From: Syoyo Fujita Date: Fri, 16 Aug 2024 06:40:36 +0900 Subject: [PATCH] browser experiment. --- sandbox/threejs/simple/TinyUSDZLoader.js | 16 +++++++++++++ sandbox/threejs/simple/index.html | 15 ++++++++++++ sandbox/threejs/simple/main.js | 30 ++++++++++++++++++++++++ sandbox/threejs/simple/package.json | 24 +++++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 sandbox/threejs/simple/TinyUSDZLoader.js create mode 100644 sandbox/threejs/simple/index.html create mode 100644 sandbox/threejs/simple/main.js create mode 100644 sandbox/threejs/simple/package.json diff --git a/sandbox/threejs/simple/TinyUSDZLoader.js b/sandbox/threejs/simple/TinyUSDZLoader.js new file mode 100644 index 00000000..06e3d6b6 --- /dev/null +++ b/sandbox/threejs/simple/TinyUSDZLoader.js @@ -0,0 +1,16 @@ +let TinyUSDZ = null; + +const TINYUSDZ_PATH = './tinyusdz.js'; + +async function TinyUSDZLoader() { + if ( TinyUSDZ === null ) { + + const { default: initTinyUSDZ } = await import( TINYUSDZ_PATH ); + TinyUSDZ = await initTinyUSDZ(); + + } + + console.log( TinyUSDZ ); +} + +export { TinyUSDZLoader }; diff --git a/sandbox/threejs/simple/index.html b/sandbox/threejs/simple/index.html new file mode 100644 index 00000000..73632caf --- /dev/null +++ b/sandbox/threejs/simple/index.html @@ -0,0 +1,15 @@ + + + + + My first three.js app + + + + + + + diff --git a/sandbox/threejs/simple/main.js b/sandbox/threejs/simple/main.js new file mode 100644 index 00000000..62cc4b13 --- /dev/null +++ b/sandbox/threejs/simple/main.js @@ -0,0 +1,30 @@ +import * as THREE from 'three'; + +import * as TinyUSDZLoader from './TinyUSDZLoader' + +const usd = TinyUSDZLoader.TinyUSDZLoader(); +//const usd = new TinyUSDZLoader.TinyU( ) + +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); + +const renderer = new THREE.WebGLRenderer(); +renderer.setSize( window.innerWidth, window.innerHeight ); +renderer.setAnimationLoop( animate ); +document.body.appendChild( renderer.domElement ); + +const geometry = new THREE.BoxGeometry( 1, 1, 1 ); +const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); +const cube = new THREE.Mesh( geometry, material ); +scene.add( cube ); + +camera.position.z = 5; + +function animate() { + + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + + renderer.render( scene, camera ); + +} diff --git a/sandbox/threejs/simple/package.json b/sandbox/threejs/simple/package.json new file mode 100644 index 00000000..1226487e --- /dev/null +++ b/sandbox/threejs/simple/package.json @@ -0,0 +1,24 @@ +{ + "name": "simple-threejs-tinyusdzloader", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "@types/three": "^0.160.0", + "typescript": "^5.2.2", + "vite": "^5.0.8", + "@types/bun": "latest" + }, + "dependencies": { + "gsap": "^3.12.4", + "lil-gui": "^0.19.1", + "stats.js": "^0.17.0", + "three": "^0.160.0" + }, + "module": "index.ts" +}