Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-23 20:02:32 +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
.DS_Store
dist
*.local

1
index.html
View File

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

5
package.json
View File

@ -1,5 +1,5 @@
{
"name": "test-vite",
"name": "trois",
"version": "0.0.0",
"scripts": {
"dev": "vite",
@ -20,6 +20,7 @@
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"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>
<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>
<script>
import Test from './components/Test.vue';
import Test1 from './components/Test1.vue';
import Test2 from './components/Test2.vue';
export default {
name: 'App',
components: {
Test,
Test1, Test2,
},
data() {
return {
tests: ['Test1', 'Test2'],
test: 'Test1',
};
},
};
</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>
<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>
<PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
<LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
<PhongMaterial id="material" color="#ff0000"></PhongMaterial>
<Scene id="scene1">
<PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
<!-- <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4 }" material="material1"></Box>
<Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere> -->
<InstancedMesh ref="iMesh" material="material2" :count="1000">
<InstancedMesh ref="imesh" material="material" :count="1000">
<BoxGeometry :size="2"></BoxGeometry>
</InstancedMesh>
</Scene>
@ -22,8 +19,7 @@ import { Object3D, MathUtils } from 'three';
import {
Renderer, PerspectiveCamera, Scene,
PointLight,
Box, Sphere,
LambertMaterial, PhongMaterial,
PhongMaterial,
InstancedMesh, BoxGeometry,
} from '../index.js';
@ -31,28 +27,25 @@ export default {
components: {
Renderer, PerspectiveCamera, Scene,
PointLight,
Box, Sphere,
LambertMaterial, PhongMaterial,
PhongMaterial,
InstancedMesh, BoxGeometry,
},
mounted() {
const renderer = this.$refs.renderer;
// const box = this.$refs.box.mesh;
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
const iMesh = this.$refs.iMesh.mesh;
const imesh = this.$refs.imesh.mesh;
const dummy = new Object3D();
for (let i = 0; i < 1000; i++) {
dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
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.updateMatrix();
iMesh.setMatrixAt(i, dummy.matrix);
imesh.setMatrixAt(i, dummy.matrix);
}
iMesh.instanceMatrix.needsUpdate = true;
imesh.instanceMatrix.needsUpdate = true;
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 PerspectiveCamera } from './PerspectiveCamera.js';
export { default as Camera } from './PerspectiveCamera.js';
export { default as Scene } from './Scene.js';

4
src/index.css
View File

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