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

cleanup

Browse Source
This commit is contained in:
Kevin Levron 2021-02-28 21:01:56 +01:00
parent 1162c6f105
commit c5faba8734
32 changed files with 32 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/helvetiker_regular.typeface.json
View File

File diff suppressed because one or more lines are too long

BIN
docs/images/img1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 150 KiB

BIN
docs/images/img10.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 714 KiB

BIN
docs/images/img2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 298 KiB

BIN
docs/images/img3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 478 KiB

BIN
docs/images/img4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 379 KiB

BIN
docs/images/img5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 184 KiB

BIN
docs/images/img6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
docs/images/img7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 261 KiB

BIN
docs/images/img8.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 198 KiB

BIN
docs/images/img9.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 309 KiB

19
docs/index.3540f44e.js
View File

File diff suppressed because one or more lines are too long

23
docs/index.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>TroisJS Demos</title>
<link rel="stylesheet" href="style.78bd8c31.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="index.3540f44e.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-178028522-1');
</script>
</body>
</html>

1
docs/style.78bd8c31.css
View File

@ -1 +0,0 @@
.app .navbar{position:fixed;margin:0;padding:0;width:100%;color:#fff;text-align:center;font-size:14px}.app .navbar li{display:inline-block;margin:1em;padding:5px;background:rgba(255,255,255,.5);color:#000;border-radius:5px;cursor:pointer;transition:background-color .4s}.app .navbar li:hover{background:#fff}.app canvas{display:block}body{margin:0;font-family:Montserrat,sans-serif}

BIN
docs/test.glb
View File

Binary file not shown.

BIN
docs/textures/Wood_Tiles_002_ambientOcclusion.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 229 KiB

BIN
docs/textures/Wood_Tiles_002_basecolor.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 184 KiB

BIN
docs/textures/Wood_Tiles_002_height.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 458 KiB

BIN
docs/textures/Wood_Tiles_002_normal.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
docs/textures/Wood_Tiles_002_roughness.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

1
index.html
View File

@ -3,7 +3,6 @@
<head>
<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>
</head>
<body>

72
src/App.vue
View File

@ -1,61 +1,49 @@
<template>
<div class="app">
<ul class="navbar">
<li v-for="t in tests" :key="t" @click="test=t">{{ t }}</li>
</ul>
<component :is="test" />
</div>
<Renderer ref="renderer" mouse-over click>
<Camera :position="{ z: 10 }" />
<Scene>
<PointLight :position="{ y: 50, z: 50 }" />
<Box ref="box" @hover="boxHover" @click="boxClick" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
<LambertMaterial :color="boxColor" />
</Box>
</Scene>
</Renderer>
</template>
<script>
import Demo1 from './components/demos/Demo1.vue';
import Demo2 from './components/demos/Demo2.vue';
import Demo3 from './components/demos/Demo3.vue';
import Demo4 from './components/demos/Demo4.vue';
import Slider1 from './components/demos/Slider1.vue';
import Slider2 from './components/demos/Slider2.vue';
import Textures from './components/demos/Textures.vue';
export default {
name: 'App',
components: {
Demo1, Demo2, Demo3, Demo4, Slider1, Slider2, Textures,
},
data() {
return {
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Textures', 'Slider1', 'Slider2'],
test: 'Demo1',
boxColor: '#ffffff',
};
},
mounted() {
const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh;
renderer.onBeforeRender(() => {
box.rotation.x += 0.01;
});
},
methods: {
boxHover({ over }) {
if (over) this.boxColor = '#ff0000';
else this.boxColor = '#ffffff';
},
boxClick() {
console.log('click');
},
},
};
</script>
<style lang="scss">
.app {
.navbar {
position: fixed;
body {
margin: 0;
padding: 0;
width: 100%;
color: #fff;
text-align: center;
font-size: 14px;
li {
display: inline-block;
margin: 1em;
padding: 5px;
background: rgba(255, 255, 255, 0.5);
color: #000;
border-radius: 5px;;
cursor: pointer;
transition: background-color 0.4s;
&:hover {
background: rgba(255, 255, 255, 1);
}
}
}
body, html, #app, .app { height: 100%; }
.app {
canvas {
display: block;
}

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

@ -1,85 +0,0 @@
<template>
<Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ x: -0, y: -100, z: 30 }" />
<Scene background="#ffffff">
<PointLight ref="light1" color="#0E09DC" :intensity="0.85" :position="{ x: 0, y: 0, z: 50 }" />
<PointLight ref="light2" color="#1CD1E1" :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 }" />
<!-- <NoisyText
text="TroisJS"
font-src="helvetiker_regular.typeface.json"
align="center"
:size="10"
:height="2"
:noise-coef="0.03"
:z-coef="5"
:position="{ x: 0, y: 0, z: 30 }"
:rotation="{ x: Math.PI / 2, y: 0, z: 0 }"
>
<PhysicalMaterial />
</NoisyText> -->
<NoisyPlane
:width="200" :width-segments="100"
:height="200" :height-segments="100"
:time-coef="0.0003"
:noise-coef="5"
:displacement-scale="15"
:delta-coef="1 / 200"
:position="{ x: 0, y: 0, z: 0 }"
>
<PhysicalMaterial />
</NoisyPlane>
<!-- <NoisySphere
:radius="10"
:time-coef="0.0003"
:noise-coef="0.07"
:disp-coef="2"
:position="{ x: 0, y: 0, z: 30 }"
>
<PhysicalMaterial flat-shading />
</NoisySphere> -->
<RefractionMesh ref="mesh" :position="{ x: 0, y: -20, z: 20 }" auto-update>
<TorusGeometry :radius="8" :tube="3" :radial-segments="8" :tubular-segments="6" />
<StandardMaterial color="#ffffff" :metalness="1" :roughness="0" flat-shading />
</RefractionMesh>
</Scene>
</Renderer>
</template>
<script>
import NoisyPlane from '../noisy/NoisyPlane.js';
import NoisySphere from '../noisy/NoisySphere.js';
import NoisyText from '../noisy/NoisyText.js';
export default {
components: { NoisyPlane, NoisySphere, NoisyText },
mounted() {
const renderer = this.$refs.renderer;
const light1 = this.$refs.light1.light;
const light2 = this.$refs.light2.light;
const light3 = this.$refs.light3.light;
const light4 = this.$refs.light4.light;
const mesh = this.$refs.mesh.mesh;
renderer.onBeforeRender(() => {
const time = Date.now() * 0.001;
const d = 100;
light1.position.x = Math.sin(time * 0.1) * d;
light1.position.y = Math.cos(time * 0.2) * d;
light2.position.x = Math.cos(time * 0.3) * d;
light2.position.y = Math.sin(time * 0.4) * d;
light3.position.x = Math.sin(time * 0.5) * d;
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;
mesh.rotation.x += 0.02; mesh.rotation.y += 0.01;
});
},
};
</script>

24
src/components/demos/Demo2.vue
View File

@ -1,24 +0,0 @@
<template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ x: 0, y: 0, z: 100 }" />
<Scene background="#000000">
<NoisyImage
src="https://assets.codepen.io/33787/img2.jpg"
:width="800"
:time-coef="0.001"
:noise-coef="2"
:z-coef="5"
:disp-coef="0.015"
:rotation="{ x: -Math.PI / 6 }"
/>
</Scene>
</Renderer>
</template>
<script>
import NoisyImage from '../noisy/NoisyImage.js';
export default {
components: { NoisyImage },
};
</script>

116
src/components/demos/Demo3.vue
View File

@ -1,116 +0,0 @@
<template>
<Renderer ref="renderer" orbit-ctrl mouse-move mouse-raycast>
<Camera :position="{ z: 200 }" />
<Scene>
<AmbientLight color="#808080" />
<PointLight color="#ff6000" />
<PointLight ref="light" color="#0060ff" :intensity="0.5" />
<PointLight color="#ff6000" :intensity="0.5" :position="{ x: 100}" />
<PointLight color="#0000ff" :intensity="0.5" :position="{ x: -100}" />
<InstancedMesh ref="imesh" :count="NUM_INSTANCES">
<BoxGeometry :width="2" :height="2" :depth="10" />
<!-- <CylinderGeometry :radius-top="2" :radius-bottom="2" :height="10" :rotate-x="Math.PI / 2" /> -->
<!-- <ConeGeometry :radius="2" :height="10" :rotate-x="Math.PI / 2" /> -->
<!-- <OctahedronGeometry :radius="3" /> -->
<StandardMaterial :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
</InstancedMesh>
<Text
text="TroisJS"
font-src="helvetiker_regular.typeface.json"
align="center"
:size="30"
:height="5"
:position="{ x: 0, y: 0, z: 0 }"
:cast-shadow="true"
>
<PhongMaterial />
</Text>
</Scene>
<EffectComposer>
<RenderPass />
<UnrealBloomPass :strength="1" />
<HalftonePass :radius="1" :scatter="0" />
</EffectComposer>
</Renderer>
</template>
<script>
import { Object3D, MathUtils, Vector3 } from 'three';
const {
randFloat: rnd,
randFloatSpread: rndFS,
} = MathUtils;
export default {
setup() {
const NUM_INSTANCES = 2000;
const instances = [];
const target = new Vector3();
const dummyO = new Object3D();
const dummyV = new Vector3();
for (let i = 0; i < NUM_INSTANCES; i++) {
instances.push({
position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
scale: rnd(0.2, 1),
scaleZ: rnd(0.1, 1),
velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
attraction: 0.03 + rnd(-0.01, 0.01),
vlimit: 1.2 + rnd(-0.1, 0.1),
});
}
return {
NUM_INSTANCES,
instances,
target,
dummyO,
dummyV,
};
},
mounted() {
this.renderer = this.$refs.renderer;
this.imesh = this.$refs.imesh.mesh;
this.light = this.$refs.light.light;
this.init();
},
methods: {
init() {
// init instanced mesh matrix
for (let i = 0; i < this.NUM_INSTANCES; i++) {
const { position, scale, scaleZ } = this.instances[i];
this.dummyO.position.copy(position);
this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
// animate
this.renderer.onBeforeRender(this.animate);
},
animate() {
this.target.copy(this.renderer.three.mouseV3);
this.light.position.copy(this.target);
for (let i = 0; i < this.NUM_INSTANCES; i++) {
const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
this.dummyV.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
velocity.add(this.dummyV).clampScalar(-vlimit, vlimit);
position.add(velocity);
this.dummyO.position.copy(position);
this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.lookAt(this.dummyV.copy(position).add(velocity));
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
},
},
};
</script>

43
src/components/demos/Demo4.vue
View File

@ -1,43 +0,0 @@
<template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" shadow>
<Camera :position="{ z: 100 }" />
<Scene>
<SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<InstancedMesh ref="imesh" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
<SphereGeometry :radius="5" />
<PhongMaterial />
</InstancedMesh>
</Scene>
<EffectComposer>
<RenderPass />
<UnrealBloomPass :strength="2" />
</EffectComposer>
</Renderer>
</template>
<script>
import { Object3D, MathUtils } from 'three';
export default {
setup() {
return {
NUM_INSTANCES: 2000,
};
},
mounted() {
// init instanced mesh matrix
const imesh = this.$refs.imesh.mesh;
const dummy = new Object3D();
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
for (let i = 0; i < this.NUM_INSTANCES; i++) {
dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
const scale = rnd(0.2, 1);
dummy.scale.set(scale, scale, scale);
dummy.updateMatrix();
imesh.setMatrixAt(i, dummy.matrix);
}
imesh.instanceMatrix.needsUpdate = true;
},
};
</script>

9
src/components/demos/DemoGLTF.vue
View File

@ -1,9 +0,0 @@
<template>
<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
<AmbientLight></AmbientLight>
</GLTFViewer>
</template>
<script>
export default {};
</script>

21
src/components/demos/Slider1.vue
View File

@ -1,21 +0,0 @@
<template>
<Slider :images="images" />
</template>
<script>
import Slider from '../sliders/Slider1.vue';
export default {
components: { Slider },
data() {
return {
images: [
{ src: 'https://troisjs.github.io/trois/images/img1.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img2.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img3.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img4.jpg' },
],
};
},
};
</script>

22
src/components/demos/Slider2.vue
View File

@ -1,22 +0,0 @@
<template>
<Slider :images="images" />
</template>
<script>
import Slider from '../sliders/Slider2.vue';
export default {
components: { Slider },
data() {
return {
images: [
{ src: 'https://troisjs.github.io/trois/images/img10.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img6.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img7.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img8.jpg' },
{ src: 'https://troisjs.github.io/trois/images/img2.jpg' },
],
};
},
};
</script>

33
src/components/demos/Textures.vue
View File

@ -1,33 +0,0 @@
<template>
<Renderer ref="renderer" antialias orbit-ctrl>
<Camera :position="{ z: 10 }" />
<Scene background="#000000" >
<AmbientLight :intensity="0.5" />
<PointLight :position="{ y: 50, z: 0 }" />
<PointLight color="#ff6000" :intensity="0.75" :position="{ y: -50, z: 0 }" />
<Sphere ref="mesh" :radius="2.5" :width-segments="200" :height-segments="200" >
<StandardMaterial :displacement-scale="0.2">
<Texture src="https://troisjs.github.io/trois/textures/Wood_Tiles_002_basecolor.jpg" />
<Texture src="https://troisjs.github.io/trois/textures/Wood_Tiles_002_height.png" id="displacementMap" />
<Texture src="https://troisjs.github.io/trois/textures/Wood_Tiles_002_normal.jpg" id="normalMap" />
<Texture src="https://troisjs.github.io/trois/textures/Wood_Tiles_002_roughness.jpg" id="roughnessMap" />
<Texture src="https://troisjs.github.io/trois/textures/Wood_Tiles_002_ambientOcclusion.jpg" id="aoMap" />
</StandardMaterial>
</Sphere>
</Scene>
</Renderer>
</template>
<script>
// textures from https://3dtextures.me/2019/04/26/wood-tiles-002/
export default {
mounted() {
const renderer = this.$refs.renderer;
const mesh = this.$refs.mesh.mesh;
renderer.onBeforeRender(() => {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.011;
});
},
};
</script>

6
src/index.css
View File

@ -1,6 +0,0 @@
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
body, html, #app, .app { height: 100%; }

1
src/main.js
View File

@ -1,7 +1,6 @@
import { createApp } from 'vue';
import { TroisJSVuePlugin } from './plugin.js';
import App from './App.vue';
import './index.css';
const app = createApp(App);
app.use(TroisJSVuePlugin);