test3D
This commit is contained in:
parent
2172cb8bad
commit
389b8ade80
160
www/package-lock.json
generated
160
www/package-lock.json
generated
@ -8,13 +8,17 @@
|
||||
"name": "www",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
"@threlte/core": "^4.3.2",
|
||||
"@threlte/extras": "^4.3.0",
|
||||
"sirv-cli": "^2.0.0",
|
||||
"three": "^0.145.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"@tsconfig/svelte": "^2.0.0",
|
||||
"@types/three": "^0.144.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
@ -247,6 +251,19 @@
|
||||
"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@threlte/core": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@threlte/core/-/core-4.3.2.tgz",
|
||||
"integrity": "sha512-CiXT8CCpqxg0Ss15xn2fpJtMGtXxH1hKjhkf/zfETdU/ZtkuPSMQxnuE7exnXMySHsccmyGH66o1cgKZZ1UE4A=="
|
||||
},
|
||||
"node_modules/@threlte/extras": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-4.3.0.tgz",
|
||||
"integrity": "sha512-9C6A+dGuaL0AWfxfARAa7Y07khAtfZQ5a3tkd+lbJLhIjO0XO6ESKTXfPJlRPurUPS7Tlmuu+Uw/xo3QlbZ2/g==",
|
||||
"dependencies": {
|
||||
"troika-three-text": "^0.46.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@tsconfig/svelte": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
|
||||
@ -289,6 +306,21 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/three": {
|
||||
"version": "0.144.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.144.0.tgz",
|
||||
"integrity": "sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/webxr": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/webxr": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
|
||||
"integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
|
||||
@ -332,6 +364,14 @@
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bidi-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.2.tgz",
|
||||
"integrity": "sha512-rzSy/k7WdX5zOyeHHCOixGXbCHkyogkxPKL2r8QtzHmVQDiWCXUWa18bLdMWT9CYMLOYTjWpTHawuev2ouYJVw==",
|
||||
"dependencies": {
|
||||
"require-from-string": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
@ -1034,6 +1074,14 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-relative": {
|
||||
"version": "0.8.7",
|
||||
"resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
|
||||
@ -1498,6 +1546,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.145.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
|
||||
"integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw=="
|
||||
},
|
||||
"node_modules/tinydate": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
|
||||
@ -1526,6 +1579,33 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/troika-three-text": {
|
||||
"version": "0.46.4",
|
||||
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.46.4.tgz",
|
||||
"integrity": "sha512-Qsv0HhUKTZgSmAJs5wvO7YlBoJSP9TGPLmrg+K9pbQq4lseQdcevbno/WI38bwJBZ/qS56hvfqEzY0zUEFzDIw==",
|
||||
"dependencies": {
|
||||
"bidi-js": "^1.0.2",
|
||||
"troika-three-utils": "^0.46.0",
|
||||
"troika-worker-utils": "^0.46.0",
|
||||
"webgl-sdf-generator": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"three": ">=0.103.0"
|
||||
}
|
||||
},
|
||||
"node_modules/troika-three-utils": {
|
||||
"version": "0.46.0",
|
||||
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.46.0.tgz",
|
||||
"integrity": "sha512-llHyrXAcwzr0bpg80GxsIp73N7FuImm4WCrKDJkAqcAsWmE5pfP9+Qzw+oMWK1P/AdHQ79eOrOl9NjyW4aOw0w==",
|
||||
"peerDependencies": {
|
||||
"three": ">=0.103.0"
|
||||
}
|
||||
},
|
||||
"node_modules/troika-worker-utils": {
|
||||
"version": "0.46.0",
|
||||
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.46.0.tgz",
|
||||
"integrity": "sha512-bzOx5f2ZBxkFhXtIvDJlLn2AI3bzCkGVbCndl/2dL5QZrwHEKl45OEIilCxYQQWJG1rEbOD9O80tMjoYjw19OA=="
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
||||
@ -1545,6 +1625,11 @@
|
||||
"node": ">=4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webgl-sdf-generator": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
|
||||
"integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="
|
||||
},
|
||||
"node_modules/wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
@ -1738,6 +1823,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@threlte/core": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@threlte/core/-/core-4.3.2.tgz",
|
||||
"integrity": "sha512-CiXT8CCpqxg0Ss15xn2fpJtMGtXxH1hKjhkf/zfETdU/ZtkuPSMQxnuE7exnXMySHsccmyGH66o1cgKZZ1UE4A=="
|
||||
},
|
||||
"@threlte/extras": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-4.3.0.tgz",
|
||||
"integrity": "sha512-9C6A+dGuaL0AWfxfARAa7Y07khAtfZQ5a3tkd+lbJLhIjO0XO6ESKTXfPJlRPurUPS7Tlmuu+Uw/xo3QlbZ2/g==",
|
||||
"requires": {
|
||||
"troika-three-text": "^0.46.4"
|
||||
}
|
||||
},
|
||||
"@tsconfig/svelte": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
|
||||
@ -1780,6 +1878,21 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/three": {
|
||||
"version": "0.144.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.144.0.tgz",
|
||||
"integrity": "sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/webxr": "*"
|
||||
}
|
||||
},
|
||||
"@types/webxr": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
|
||||
"integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
|
||||
@ -1811,6 +1924,14 @@
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"bidi-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.2.tgz",
|
||||
"integrity": "sha512-rzSy/k7WdX5zOyeHHCOixGXbCHkyogkxPKL2r8QtzHmVQDiWCXUWa18bLdMWT9CYMLOYTjWpTHawuev2ouYJVw==",
|
||||
"requires": {
|
||||
"require-from-string": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
@ -2345,6 +2466,11 @@
|
||||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
|
||||
},
|
||||
"require-relative": {
|
||||
"version": "0.8.7",
|
||||
"resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
|
||||
@ -2641,6 +2767,11 @@
|
||||
"source-map-support": "~0.5.20"
|
||||
}
|
||||
},
|
||||
"three": {
|
||||
"version": "0.145.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
|
||||
"integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw=="
|
||||
},
|
||||
"tinydate": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
|
||||
@ -2660,6 +2791,28 @@
|
||||
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
|
||||
"integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw=="
|
||||
},
|
||||
"troika-three-text": {
|
||||
"version": "0.46.4",
|
||||
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.46.4.tgz",
|
||||
"integrity": "sha512-Qsv0HhUKTZgSmAJs5wvO7YlBoJSP9TGPLmrg+K9pbQq4lseQdcevbno/WI38bwJBZ/qS56hvfqEzY0zUEFzDIw==",
|
||||
"requires": {
|
||||
"bidi-js": "^1.0.2",
|
||||
"troika-three-utils": "^0.46.0",
|
||||
"troika-worker-utils": "^0.46.0",
|
||||
"webgl-sdf-generator": "1.1.1"
|
||||
}
|
||||
},
|
||||
"troika-three-utils": {
|
||||
"version": "0.46.0",
|
||||
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.46.0.tgz",
|
||||
"integrity": "sha512-llHyrXAcwzr0bpg80GxsIp73N7FuImm4WCrKDJkAqcAsWmE5pfP9+Qzw+oMWK1P/AdHQ79eOrOl9NjyW4aOw0w==",
|
||||
"requires": {}
|
||||
},
|
||||
"troika-worker-utils": {
|
||||
"version": "0.46.0",
|
||||
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.46.0.tgz",
|
||||
"integrity": "sha512-bzOx5f2ZBxkFhXtIvDJlLn2AI3bzCkGVbCndl/2dL5QZrwHEKl45OEIilCxYQQWJG1rEbOD9O80tMjoYjw19OA=="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
||||
@ -2672,6 +2825,11 @@
|
||||
"integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
|
||||
"dev": true
|
||||
},
|
||||
"webgl-sdf-generator": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
|
||||
"integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
|
@ -13,6 +13,9 @@
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"@tsconfig/svelte": "^2.0.0",
|
||||
"@types/three": "^0.144.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
@ -21,12 +24,16 @@
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^2.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"typescript": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"@tsconfig/svelte": "^2.0.0"
|
||||
"typescript": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
}
|
||||
"@threlte/core": "^4.3.2",
|
||||
"@threlte/extras": "^4.3.0",
|
||||
"sirv-cli": "^2.0.0",
|
||||
"three": "^0.145.0"
|
||||
},
|
||||
"main": "rollup.config.js",
|
||||
"keywords": [],
|
||||
"license": "ISC"
|
||||
}
|
||||
|
@ -56,10 +56,11 @@ export default {
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
main: true,
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
commonjs({include: 'node_modules/**'}),
|
||||
typescript({
|
||||
sourceMap: !production,
|
||||
inlineSources: !production
|
||||
|
@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
// export let name: string;
|
||||
import Test3D from "./components/test3D.svelte";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Hello {name}!</h1>
|
||||
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
|
||||
<Test3D></Test3D>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
70
www/src/components/test3D.svelte
Normal file
70
www/src/components/test3D.svelte
Normal file
@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import {
|
||||
CircleBufferGeometry,
|
||||
MeshStandardMaterial,
|
||||
BoxBufferGeometry,
|
||||
DoubleSide,
|
||||
} from "three";
|
||||
import { DEG2RAD } from "three/src/math/MathUtils";
|
||||
import {
|
||||
AmbientLight,
|
||||
Canvas,
|
||||
DirectionalLight,
|
||||
Group,
|
||||
HemisphereLight,
|
||||
Mesh,
|
||||
OrbitControls,
|
||||
PerspectiveCamera,
|
||||
} from "@threlte/core";
|
||||
import { spring } from "svelte/motion";
|
||||
|
||||
const scale = spring(1);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Canvas>
|
||||
<PerspectiveCamera position={{ x: 10, y: 10, z: 10 }} fov={24}>
|
||||
<OrbitControls
|
||||
maxPolarAngle={DEG2RAD * 80}
|
||||
autoRotate={false}
|
||||
enableZoom={false}
|
||||
target={{ y: 0.5 }}
|
||||
/>
|
||||
</PerspectiveCamera>
|
||||
|
||||
<DirectionalLight shadow position={{ x: 3, y: 10, z: 10 }} />
|
||||
<DirectionalLight position={{ x: -3, y: 10, z: -10 }} intensity={0.2} />
|
||||
<AmbientLight intensity={0.2} />
|
||||
|
||||
<!-- Cube -->
|
||||
<Group scale={$scale}>
|
||||
<Mesh
|
||||
interactive
|
||||
on:pointerenter={() => ($scale = 2)}
|
||||
on:pointerleave={() => ($scale = 1)}
|
||||
position={{ y: 0.5 }}
|
||||
castShadow
|
||||
geometry={new BoxBufferGeometry(1, 1, 1)}
|
||||
material={new MeshStandardMaterial({ color: "#333333" })}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<!-- Floor -->
|
||||
<Mesh
|
||||
receiveShadow
|
||||
rotation={{ x: -90 * (Math.PI / 180) }}
|
||||
geometry={new CircleBufferGeometry(3, 72)}
|
||||
material={new MeshStandardMaterial({
|
||||
side: DoubleSide,
|
||||
color: "white",
|
||||
})}
|
||||
/>
|
||||
</Canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
@ -2,9 +2,9 @@ import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'tout tout le monde'
|
||||
}
|
||||
// props: {
|
||||
// name: 'tout tout le monde'
|
||||
// }
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
Loading…
x
Reference in New Issue
Block a user