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-16 15:50:31 +02:00
parent eeba4cc967
commit 9bb438dd97
4 changed files with 72 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -23,7 +23,7 @@
"rollup-plugin-vue": "^6.0.0-beta.10",
"sass": "^1.26.10",
"vite": "^1.0.0-rc.4",
"vue": "^3.0.0-rc.11"
"vue": "^3.0.0-rc.10"
},
"main": "build/trois.js",
"module": "build/trois.module.js",

12
src/App.vue
View File

@ -41,8 +41,20 @@ export default {
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);
}
}
}
canvas {
display: block;
}
}
</style>

63
src/components/Test2.vue
View File

@ -1,12 +1,15 @@
<template>
<Renderer ref="renderer" :shadow="true" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ z: 100 }"></Camera>
<Renderer ref="renderer" :shadow="true" mouse-move="body" :mouse-raycast="true">
<Camera :position="{ z: 200 }"></Camera>
<PhongMaterial id="material" color="#ff0000"></PhongMaterial>
<!-- Not possible to use the same material for Mesh and InstancedMesh -->
<PhongMaterial id="material1" color="#ffffff"></PhongMaterial>
<PhongMaterial id="material2" color="#ffffff"></PhongMaterial>
<Scene id="scene1">
<PointLight ref="light" :position="{ x: 0, y: 150, z: 150 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></PointLight>
<InstancedMesh ref="imesh" material="material" :count="1000" :cast-shadow="true" :receive-shadow="true">
<PointLight ref="light" :intensity="0.5" :position="{ z: 200 }" :cast-shadow="true" :shadow-map-size="{ width: 2048, height: 2048 }"></PointLight>
<Plane ref="plane" material="material1" :receive-shadow="true"></Plane>
<InstancedMesh ref="imesh" material="material2" :count="500" :cast-shadow="true" :receive-shadow="true">
<BoxGeometry :size="5"></BoxGeometry>
</InstancedMesh>
</Scene>
@ -14,43 +17,71 @@
</template>
<script>
import { Object3D, MathUtils } from 'three';
import {
Renderer, Camera, Scene,
PointLight,
PhongMaterial,
InstancedMesh, BoxGeometry,
Plane, InstancedMesh, BoxGeometry,
} from '../index.js';
import { lerp } from '../tools.js';
export default {
components: {
Renderer, Camera, Scene,
PointLight,
PhongMaterial,
InstancedMesh, BoxGeometry,
Plane, InstancedMesh, BoxGeometry,
},
mounted() {
this.renderer = this.$refs.renderer;
this.three = this.renderer.three;
this.init();
},
methods: {
init() {
this.updatePlaneSize();
this.renderer.onAfterResize(this.updatePlaneSize);
// init instanced mesh matrix
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
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));
for (let i = 0; i < 500; i++) {
dummy.position.set(rndFS(200), rndFS(200), rnd(10, 50));
dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
const scale = rnd(0.2, 1);
dummy.scale.set(scale, scale, scale);
// const scale = rnd(0.2, 1);
// dummy.scale.set(scale, scale, scale);
dummy.updateMatrix();
imesh.setMatrixAt(i, dummy.matrix);
}
imesh.instanceMatrix.needsUpdate = true;
const renderer = this.$refs.renderer;
// light move
const light = this.$refs.light.light;
renderer.onBeforeRender(() => {
const t = Date.now() * 0.0001;
const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4), c3 = c2 * Math.cos(t * 0.3);
light.position.set(c1 * 100, c2 * 100, c3 * 100);
this.renderer.onBeforeRender(() => {
const pos = this.three.mouseV3;
// light.position.x = pos.x;
// light.position.y = pos.y;
light.position.x = lerp(light.position.x, pos.x, 0.05);
light.position.y = lerp(light.position.y, pos.y, 0.05);
});
// const light = this.$refs.light.light;
// this.renderer.onBeforeRender(() => {
// const t = Date.now() * 0.0001;
// const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4);
// light.position.set(c1 * 100, c2 * 100, 150);
// });
},
updatePlaneSize() {
const plane = this.$refs.plane.mesh;
plane.scale.x = this.three.size.wWidth;
plane.scale.y = this.three.size.wHeight;
},
},
};
</script>

4
src/components/Test3.vue
View File

@ -2,7 +2,7 @@
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ z: 100 }"></Camera>
<PhongMaterial id="material" color="#ffffff"></PhongMaterial>
<Scene id="scene1">
<Scene id="scene1" background="#ffffff">
<!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 20, z: 50 }"></SpotLight> -->
<!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -20, z: 50 }"></SpotLight> -->
<PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
@ -32,7 +32,7 @@ export default {
InstancedMesh, SphereGeometry,
},
mounted() {
const renderer = this.$refs.renderer;
// const renderer = this.$refs.renderer;
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
const imesh = this.$refs.imesh.mesh;