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
parent
ff2da62e4b
commit
4505bb7922
File diff suppressed because one or more lines are too long
19
docs/index.891a7ba5.js
Normal file
19
docs/index.891a7ba5.js
Normal file
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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;
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user