mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
cleanup
This commit is contained in:
Kevin Levron
parent
1162c6f105
commit
c5faba8734
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 714 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 298 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 478 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 379 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 309 KiB |
File diff suppressed because one or more lines are too long
@ -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 +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
BIN
docs/test.glb
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 458 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
@ -3,7 +3,6 @@
|
|||||||
<head>
|
<head>
|
||||||
<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">
|
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
72
src/App.vue
72
src/App.vue
@ -1,61 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app">
|
<Renderer ref="renderer" mouse-over click>
|
||||||
<ul class="navbar">
|
<Camera :position="{ z: 10 }" />
|
||||||
<li v-for="t in tests" :key="t" @click="test=t">{{ t }}</li>
|
<Scene>
|
||||||
</ul>
|
<PointLight :position="{ y: 50, z: 50 }" />
|
||||||
<component :is="test" />
|
<Box ref="box" @hover="boxHover" @click="boxClick" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
|
||||||
</div>
|
<LambertMaterial :color="boxColor" />
|
||||||
|
</Box>
|
||||||
|
</Scene>
|
||||||
|
</Renderer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
Demo1, Demo2, Demo3, Demo4, Slider1, Slider2, Textures,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Textures', 'Slider1', 'Slider2'],
|
boxColor: '#ffffff',
|
||||||
test: 'Demo1',
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.app {
|
body {
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
}
|
||||||
width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
li {
|
body, html, #app, .app { height: 100%; }
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.app {
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
|
|
||||||
<AmbientLight></AmbientLight>
|
|
||||||
</GLTFViewer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {};
|
|
||||||
</script>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body, html, #app, .app { height: 100%; }
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import { TroisJSVuePlugin } from './plugin.js';
|
import { TroisJSVuePlugin } from './plugin.js';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
app.use(TroisJSVuePlugin);
|
app.use(TroisJSVuePlugin);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user