anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 12:55:08 +00:00
Code Issues Projects Releases Wiki Activity

Center universally

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-02-01 23:36:52 +03:00
parent a199fe86ff
commit 5f55b913d8
5 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
bundle/vue-three-d-mockup.esm.js
View File

@@ -99,6 +99,9 @@ class MockupModel extends Group {
lookAtAnim(dt, { x, y, z }) { lookAtAnim(dt, { x, y, z }) {
const target = new Vector3(); const target = new Vector3();
// const boxTarget = new Vector3();
// const boundingBox = new Box3().setFromObject(this);
// boundingBox.getSize(boxTarget);
target.x = x; target.x = x;
target.y = y; target.y = y;
target.z = z; target.z = z;
@@ -107,7 +110,7 @@ class MockupModel extends Group {
} }
function roundedPlane(width, height, radius) { function roundedPlane(width, height, radius) {
const x = 1; const y = 1; const x = 0; const y = 0;
const shape = new Shape(); const shape = new Shape();
shape.moveTo(x, y + radius); shape.moveTo(x, y + radius);
@@ -228,9 +231,8 @@ var script = {
recomputeUVs(); recomputeUVs();
screen.translateX(-width / 2); screen.translateZ(3.6);
screen.translateY(-height / 2); screen.geometry.center();
screen.translateZ(6);
phone.add(screen); phone.add(screen);
}; };
@@ -239,14 +241,17 @@ var script = {
loader.load( loader.load(
phoneObj, phoneObj,
(body) => { (body) => {
const bodyGroup = new THREE.Object3D();
body.traverse((child) => { body.traverse((child) => {
if (child instanceof THREE.Mesh) { if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr }); child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
child.geometry.center();
const mesh = new THREE.Mesh(child.geometry, child.material);
bodyGroup.add(mesh);
} }
}); });
body.position.y = -60; phone.add(bodyGroup);
phone.add(body);
}, },
); );
}; };

1
src/Demo.vue
View File

@@ -20,7 +20,6 @@
y: -0.3, y: -0.3,
z: -0.06, z: -0.06,
}]" }]"
phoneClr="black"
/> />
<video <video

12
src/Mockup.vue
View File

@@ -119,9 +119,8 @@ export default {
recomputeUVs(); recomputeUVs();
screen.translateX(-width / 2); screen.translateZ(3.6);
screen.translateY(-height / 2); screen.geometry.center();
screen.translateZ(6);
phone.add(screen); phone.add(screen);
}; };
@@ -130,14 +129,17 @@ export default {
loader.load( loader.load(
phoneObj, phoneObj,
(body) => { (body) => {
const bodyGroup = new THREE.Object3D();
body.traverse((child) => { body.traverse((child) => {
if (child instanceof THREE.Mesh) { if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr }); child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
child.geometry.center();
const mesh = new THREE.Mesh(child.geometry, child.material);
bodyGroup.add(mesh);
} }
}); });
body.position.y = -60; phone.add(bodyGroup);
phone.add(body);
}, },
); );
}; };

3
src/MockupModel.js
View File

@@ -96,6 +96,9 @@ export default class MockupModel extends Group {
lookAtAnim(dt, { x, y, z }) { lookAtAnim(dt, { x, y, z }) {
const target = new Vector3(); const target = new Vector3();
// const boxTarget = new Vector3();
// const boundingBox = new Box3().setFromObject(this);
// boundingBox.getSize(boxTarget);
target.x = x; target.x = x;
target.y = y; target.y = y;
target.z = z; target.z = z;

2
src/utils/roundedPlane.js
View File

@@ -1,7 +1,7 @@
import { Shape, ShapeBufferGeometry } from 'three'; import { Shape, ShapeBufferGeometry } from 'three';
export default function roundedPlane(width, height, radius) { export default function roundedPlane(width, height, radius) {
const x = 1; const y = 1; const x = 0; const y = 0;
const shape = new Shape(); const shape = new Shape();
shape.moveTo(x, y + radius); shape.moveTo(x, y + radius);