1
0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00

update demos

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

File diff suppressed because one or more lines are too long

19
docs/index.891a7ba5.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -4,12 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
</head>
<body>
<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 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>

View File

@ -7,7 +7,7 @@
<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 }" />
<NoisyText
<!-- <NoisyText
text="TroisJS"
font-src="helvetiker_regular.typeface.json"
align="center"
@ -19,29 +19,44 @@
:rotation="{ x: Math.PI / 2, y: 0, z: 0 }"
>
<PhysicalMaterial />
</NoisyText>
</NoisyText> -->
<NoisyPlane
:width="200" :width-segments="100"
:height="200" :height-segments="100"
:width="200" :width-segments="200"
:height="200" :height-segments="200"
:time-coef="0.0003"
:noise-coef="0.03"
:z-coef="7"
:position="{ x: 0, y: 0, z: 0 }"
>
<PhysicalMaterial />
<PhysicalMaterial flat-shading />
</NoisyPlane>
<!-- <NoisySphere
:radius="10"
:time-coef="0.0003"
:noise-coef="0.06"
:disp-coef="10"
:noise-coef="0.07"
:disp-coef="2"
:position="{ x: 0, y: 0, z: 30 }"
>
<PhysicalMaterial flat-shading />
</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>
</Renderer>
</template>
@ -59,6 +74,10 @@ export default {
const light2 = this.$refs.light2.light;
const light3 = this.$refs.light3.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(() => {
const time = Date.now() * 0.001;
@ -71,6 +90,10 @@ export default {
light3.position.y = Math.sin(time * 0.6) * d;
light4.position.x = Math.sin(time * 0.7) * 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;
});
},
};

View File

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

View File

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

View File

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