Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

update demos

Browse Source
This commit is contained in:
Kevin Levron 2020-10-03 22:13:59 +02:00
parent ff2da62e4b
commit 4505bb7922
7 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/index.295ca1aa.js
View File

File diff suppressed because one or more lines are too long

19
docs/index.891a7ba5.js Normal file
View File

File diff suppressed because one or more lines are too long

4
docs/index.html
View File

@ -4,12 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
<title>Vite App</title> <title>TroisJS Demos</title>
<link rel="stylesheet" href="style.78bd8c31.css"> <link rel="stylesheet" href="style.78bd8c31.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="index.295ca1aa.js"></script> <script type="module" src="index.891a7ba5.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>

37
src/components/demos/Demo1.vue
View File

@ -7,7 +7,7 @@
<PointLight ref="light3" color="#18C02C" :intensity="0.85" :position="{ x: 0, y: 0, z: 50 }" /> <PointLight ref="light3" color="#18C02C" :intensity="0.85" :position="{ x: 0, y: 0, z: 50 }" />
<PointLight ref="light4" color="#ee3bcf" :intensity="0.85" :position="{ x: 0, y: 0, z: 50 }" /> <PointLight ref="light4" color="#ee3bcf" :intensity="0.85" :position="{ x: 0, y: 0, z: 50 }" />
<NoisyText <!-- <NoisyText
text="TroisJS" text="TroisJS"
font-src="helvetiker_regular.typeface.json" font-src="helvetiker_regular.typeface.json"
align="center" align="center"
@ -19,29 +19,44 @@
:rotation="{ x: Math.PI / 2, y: 0, z: 0 }" :rotation="{ x: Math.PI / 2, y: 0, z: 0 }"
> >
<PhysicalMaterial /> <PhysicalMaterial />
</NoisyText> </NoisyText> -->
<NoisyPlane <NoisyPlane
:width="200" :width-segments="100" :width="200" :width-segments="200"
:height="200" :height-segments="100" :height="200" :height-segments="200"
:time-coef="0.0003" :time-coef="0.0003"
:noise-coef="0.03" :noise-coef="0.03"
:z-coef="7" :z-coef="7"
:position="{ x: 0, y: 0, z: 0 }" :position="{ x: 0, y: 0, z: 0 }"
> >
<PhysicalMaterial /> <PhysicalMaterial flat-shading />
</NoisyPlane> </NoisyPlane>
<!-- <NoisySphere <!-- <NoisySphere
:radius="10" :radius="10"
:time-coef="0.0003" :time-coef="0.0003"
:noise-coef="0.06" :noise-coef="0.07"
:disp-coef="10" :disp-coef="2"
:position="{ x: 0, y: 0, z: 30 }" :position="{ x: 0, y: 0, z: 30 }"
> >
<PhysicalMaterial flat-shading /> <PhysicalMaterial flat-shading />
</NoisySphere> --> </NoisySphere> -->
<MirrorMesh ref="mesh1" :position="{ x: -30, y: -15, z: 20 }" auto-update>
<DodecahedronGeometry :radius="8" />
<StandardMaterial color="#ffffff" :metalness="1" :roughness="0" />
</MirrorMesh>
<RefractionMesh ref="mesh2" :position="{ x: 0, y: -15, z: 20 }" auto-update>
<TorusGeometry :radius="8" :tube="3" />
<StandardMaterial color="#ffffff" :metalness="1" :roughness="0" />
</RefractionMesh>
<Gem ref="mesh3" :position="{ x: 30, y: -15, z: 20 }" auto-update>
<DodecahedronGeometry :radius="8" />
<StandardMaterial color="#0000ff" :metalness="1" :roughness="0" />
</Gem>
</Scene> </Scene>
</Renderer> </Renderer>
</template> </template>
@ -59,6 +74,10 @@ export default {
const light2 = this.$refs.light2.light; const light2 = this.$refs.light2.light;
const light3 = this.$refs.light3.light; const light3 = this.$refs.light3.light;
const light4 = this.$refs.light4.light; const light4 = this.$refs.light4.light;
const mesh1 = this.$refs.mesh1.mesh;
const mesh2 = this.$refs.mesh2.mesh;
const mesh3 = this.$refs.mesh3.mesh;
const mesh4 = this.$refs.mesh3.meshBack;
renderer.onBeforeRender(() => { renderer.onBeforeRender(() => {
const time = Date.now() * 0.001; const time = Date.now() * 0.001;
@ -71,6 +90,10 @@ export default {
light3.position.y = Math.sin(time * 0.6) * d; light3.position.y = Math.sin(time * 0.6) * d;
light4.position.x = Math.sin(time * 0.7) * d; light4.position.x = Math.sin(time * 0.7) * d;
light4.position.y = Math.cos(time * 0.8) * d; light4.position.y = Math.cos(time * 0.8) * d;
mesh1.rotation.x += 0.015; mesh1.rotation.y += 0.008;
mesh2.rotation.x += 0.02; mesh2.rotation.y += 0.01;
mesh3.rotation.x += 0.007; mesh3.rotation.y += 0.013;
mesh4.rotation.x = mesh3.rotation.x; mesh4.rotation.y = mesh3.rotation.y;
}); });
}, },
}; };

4
src/meshes/Gem.js
View File

@ -17,11 +17,11 @@ export default {
cubeRTSize: { type: Number, default: 512 }, cubeRTSize: { type: Number, default: 512 },
cubeCameraNear: { type: Number, default: 0.1 }, cubeCameraNear: { type: Number, default: 0.1 },
cubeCameraFar: { type: Number, default: 2000 }, cubeCameraFar: { type: Number, default: 2000 },
cubeRTAutoUpdate: Boolean, autoUpdate: Boolean,
}, },
mounted() { mounted() {
this.initGem(); this.initGem();
if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT); if (this.autoUpdate) this.three.onBeforeRender(this.updateCubeRT);
else this.rendererComponent.onMounted(this.updateCubeRT); else this.rendererComponent.onMounted(this.updateCubeRT);
}, },
unmounted() { unmounted() {

4
src/meshes/MirrorMesh.js
View File

@ -14,11 +14,11 @@ export default {
cubeRTSize: { type: Number, default: 512 }, cubeRTSize: { type: Number, default: 512 },
cubeCameraNear: { type: Number, default: 0.1 }, cubeCameraNear: { type: Number, default: 0.1 },
cubeCameraFar: { type: Number, default: 2000 }, cubeCameraFar: { type: Number, default: 2000 },
cubeRTAutoUpdate: Boolean, autoUpdate: Boolean,
}, },
mounted() { mounted() {
this.initMirrorMesh(); this.initMirrorMesh();
if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT); if (this.autoUpdate) this.three.onBeforeRender(this.updateCubeRT);
else this.rendererComponent.onMounted(this.updateCubeRT); else this.rendererComponent.onMounted(this.updateCubeRT);
}, },
unmounted() { unmounted() {

4
src/meshes/RefractionMesh.js
View File

@ -15,11 +15,11 @@ export default {
cubeRTSize: { type: Number, default: 512 }, cubeRTSize: { type: Number, default: 512 },
cubeCameraNear: { type: Number, default: 0.1 }, cubeCameraNear: { type: Number, default: 0.1 },
cubeCameraFar: { type: Number, default: 2000 }, cubeCameraFar: { type: Number, default: 2000 },
cubeRTAutoUpdate: Boolean, autoUpdate: Boolean,
}, },
mounted() { mounted() {
this.initMirrorMesh(); this.initMirrorMesh();
if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT); if (this.autoUpdate) this.three.onBeforeRender(this.updateCubeRT);
else this.rendererComponent.onMounted(this.updateCubeRT); else this.rendererComponent.onMounted(this.updateCubeRT);
}, },
unmounted() { unmounted() {