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

add textures demo

Browse Source
This commit is contained in:
Kevin Levron 2020-10-14 22:14:13 +02:00
parent 43af7e2db6
commit 6835052e75
4 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.f19a10a5.js → docs/index.3540f44e.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -9,7 +9,7 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="index.f19a10a5.js"></script>
<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>

6
src/App.vue
View File

@ -14,16 +14,16 @@ 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 DemoGLTF from './components/demos/DemoGLTF.vue';
import Textures from './components/demos/Textures.vue';
export default {
name: 'App',
components: {
Demo1, Demo2, Demo3, Demo4, Slider1, Slider2, DemoGLTF,
Demo1, Demo2, Demo3, Demo4, Slider1, Slider2, Textures,
},
data() {
return {
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Slider1', 'Slider2', 'DemoGLTF'],
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Textures', 'Slider1', 'Slider2'],
test: 'Demo1',
};
},

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

@ -0,0 +1,33 @@
<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>