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

wip

Browse Source
This commit is contained in:
Kevin Levron 2020-09-15 10:07:57 +02:00
parent 7b147453af
commit 2daac794a8
8 changed files with 87 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,3 @@
node_modules node_modules
.DS_Store .DS_Store
dist
*.local *.local

1
index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<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>

5
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "test-vite", "name": "trois",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@ -20,6 +20,7 @@
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"vite": "^1.0.0-rc.1" "sass": "^1.26.10",
"vite": "^1.0.0-rc.4"
} }
} }

38
src/App.vue
View File

@ -1,14 +1,46 @@
<template> <template>
<Test></Test> <div class="app">
<ul class="navbar">
<li v-for="t in tests" :key="t" @click="test=t">{{ t }}</li>
</ul>
<component :is="test" />
</div>
</template> </template>
<script> <script>
import Test from './components/Test.vue'; import Test1 from './components/Test1.vue';
import Test2 from './components/Test2.vue';
export default { export default {
name: 'App', name: 'App',
components: { components: {
Test, Test1, Test2,
},
data() {
return {
tests: ['Test1', 'Test2'],
test: 'Test1',
};
}, },
}; };
</script> </script>
<style lang="scss">
.app {
.navbar {
position: fixed;
margin: 0;
padding: 0;
width: 100%;
color: #fff;
text-align: center;
font-size: 14px;
li {
display: inline-block;
margin: 1em;
cursor: pointer;
}
}
}
</style>

38
src/components/Test1.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<Renderer ref="renderer">
<Camera :position="{ z: 100 }"></Camera>
<LambertMaterial id="material" color="#0000ff"></LambertMaterial>
<Scene>
<PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
<Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
</Scene>
</Renderer>
</template>
<script>
import {
Renderer, Camera, Scene,
PointLight,
Box,
LambertMaterial,
} from '../index.js';
export default {
components: {
Renderer, Camera, Scene,
PointLight,
Box,
LambertMaterial,
},
mounted() {
const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh;
renderer.onBeforeRender(() => {
box.rotation.x += 0.01;
});
},
};
</script>

23
src/components/Test.vue → src/components/Test2.vue
View File

@ -1,15 +1,12 @@
<template> <template>
<Renderer ref="renderer"> <!-- :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"> --> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera> <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
<PhongMaterial id="material1" color="#ff0000"></PhongMaterial> <PhongMaterial id="material" color="#ff0000"></PhongMaterial>
<LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
<Scene id="scene1"> <Scene id="scene1">
<PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight> <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
<!-- <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4 }" material="material1"></Box> <InstancedMesh ref="imesh" material="material" :count="1000">
<Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere> -->
<InstancedMesh ref="iMesh" material="material2" :count="1000">
<BoxGeometry :size="2"></BoxGeometry> <BoxGeometry :size="2"></BoxGeometry>
</InstancedMesh> </InstancedMesh>
</Scene> </Scene>
@ -22,8 +19,7 @@ import { Object3D, MathUtils } from 'three';
import { import {
Renderer, PerspectiveCamera, Scene, Renderer, PerspectiveCamera, Scene,
PointLight, PointLight,
Box, Sphere, PhongMaterial,
LambertMaterial, PhongMaterial,
InstancedMesh, BoxGeometry, InstancedMesh, BoxGeometry,
} from '../index.js'; } from '../index.js';
@ -31,28 +27,25 @@ export default {
components: { components: {
Renderer, PerspectiveCamera, Scene, Renderer, PerspectiveCamera, Scene,
PointLight, PointLight,
Box, Sphere, PhongMaterial,
LambertMaterial, PhongMaterial,
InstancedMesh, BoxGeometry, InstancedMesh, BoxGeometry,
}, },
mounted() { mounted() {
const renderer = this.$refs.renderer; const renderer = this.$refs.renderer;
// const box = this.$refs.box.mesh;
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils; const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
const iMesh = this.$refs.iMesh.mesh; const imesh = this.$refs.imesh.mesh;
const dummy = new Object3D(); const dummy = new Object3D();
for (let i = 0; i < 1000; i++) { for (let i = 0; i < 1000; i++) {
dummy.position.set(rndFS(100), rndFS(100), rndFS(100)); dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1)); dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
// dummy.scale.set(rnd(0.1, 1), rnd(0.1, 1), rnd(0.1, 1)); // dummy.scale.set(rnd(0.1, 1), rnd(0.1, 1), rnd(0.1, 1));
dummy.updateMatrix(); dummy.updateMatrix();
iMesh.setMatrixAt(i, dummy.matrix); imesh.setMatrixAt(i, dummy.matrix);
} }
iMesh.instanceMatrix.needsUpdate = true; imesh.instanceMatrix.needsUpdate = true;
renderer.onBeforeRender(() => { renderer.onBeforeRender(() => {
// box.rotation.x += 0.01;
}); });
}, },
}; };

1
src/core/index.js
View File

@ -1,3 +1,4 @@
export { default as Renderer } from './Renderer.vue'; export { default as Renderer } from './Renderer.vue';
export { default as PerspectiveCamera } from './PerspectiveCamera.js'; export { default as PerspectiveCamera } from './PerspectiveCamera.js';
export { default as Camera } from './PerspectiveCamera.js';
export { default as Scene } from './Scene.js'; export { default as Scene } from './Scene.js';

4
src/index.css
View File

@ -1,6 +1,4 @@
body { body {
margin: 0; margin: 0;
} font-family: 'Montserrat', sans-serif;
#app {
} }