laozt
2 years ago
parent
fdaef58223
commit
bffde87473
@ -0,0 +1,117 @@
|
|||||||
|
## [1.4.1](https://github.com/hujiulong/vue-3d-model/compare/v1.4.0...v1.4.1) (2022-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* fix order of calculations ([f58bf72](https://github.com/hujiulong/vue-3d-model/commit/f58bf72be93c7c088c73e64919deaea3f20301a1))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [1.4.0](https://github.com/hujiulong/vue-3d-model/compare/v1.3.1...v1.4.0) (2021-06-26)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **demo:** fix json loader demo ([3236bc2](https://github.com/hujiulong/vue-3d-model/commit/3236bc2c990905f812835a81f1c96c318d06a3d5))
|
||||||
|
* remove calls to removed methods ([ff01a19](https://github.com/hujiulong/vue-3d-model/commit/ff01a19d8715d0b44b9cb98ae4e51e070ad44915))
|
||||||
|
* the default props should return a new object ([e5cf0e1](https://github.com/hujiulong/vue-3d-model/commit/e5cf0e106c3cb95738c7201ee322b41a28d824a6))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* loaders should use setRequestHeader ([#267](https://github.com/hujiulong/vue-3d-model/issues/267)) ([40b077a](https://github.com/hujiulong/vue-3d-model/commit/40b077a3513f0830d1ba28a3c653b401b7ac97b2))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [1.3.1](https://github.com/hujiulong/vue-3d-model/compare/v1.3.0...v1.3.1) (2020-06-30)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [1.3.0](https://github.com/hujiulong/vue-3d-model/compare/v1.2.0...v1.3.0) (2020-06-30)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* fix controlsOptions ([be18b78](https://github.com/hujiulong/vue-3d-model/commit/be18b783eee5fca2fceacc42ec002a80478f50e0))
|
||||||
|
* publicPath ([b69a2c7](https://github.com/hujiulong/vue-3d-model/commit/b69a2c7a6146c43849640926a97dbf11f65b75cb))
|
||||||
|
* resolve gammaOutput removed warning and update the README.md ([#172](https://github.com/hujiulong/vue-3d-model/issues/172)) ([f4ab34b](https://github.com/hujiulong/vue-3d-model/commit/f4ab34bc7663be40be122def73c7dcbed636eeb8))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* model-fbx and update three.js ([#167](https://github.com/hujiulong/vue-3d-model/issues/167)) ([c700a0f](https://github.com/hujiulong/vue-3d-model/commit/c700a0f9181ef5f1bb8f474cbf59c079a41e2b33))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [1.2.0](https://github.com/hujiulong/vue-3d-model/compare/v1.1.0...v1.2.0) (2019-10-23)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* dispose objects before component destroy ([02adf5b](https://github.com/hujiulong/vue-3d-model/commit/02adf5bc53f9911daa46c8dc0daa0aa3a61e396a))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add a new prop: glOptions. closes [#111](https://github.com/hujiulong/vue-3d-model/issues/111) ([7d3448e](https://github.com/hujiulong/vue-3d-model/commit/7d3448eee51ebbf603c859ba62bc28efd9f4ec89))
|
||||||
|
* allow override OrbitControls Properties ([#123](https://github.com/hujiulong/vue-3d-model/issues/123)) ([55e29f6](https://github.com/hujiulong/vue-3d-model/commit/55e29f678b7278bd36ae52b67c028182931b871a))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [1.1.0-alpha.0](https://github.com/hujiulong/vue-3d-model/compare/v1.0.2...1.1.0-alpha.0) (2019-06-21)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* fix camera options ([#67](https://github.com/hujiulong/vue-3d-model/issues/67)) ([f5a0fe5](https://github.com/hujiulong/vue-3d-model/commit/f5a0fe5fea94774437c215a47008157637edc43e))
|
||||||
|
* fix props check ([693295b](https://github.com/hujiulong/vue-3d-model/commit/693295b764bd780732f420ad7e2d19881ceef8f1))
|
||||||
|
* updated background example ([#68](https://github.com/hujiulong/vue-3d-model/issues/68)) ([3760535](https://github.com/hujiulong/vue-3d-model/commit/3760535879ea71dbf92e647bd393d27e2b133d38))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **gltf:** set the default value of gammaOutput to true ([e609c91](https://github.com/hujiulong/vue-3d-model/commit/e609c9145a95c425a4de1ba6e2d866881b7ecb73))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [1.0.2](https://github.com/hujiulong/vue-3d-model/compare/v1.0.1...v1.0.2) (2018-08-11)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* fix the config of dev(close [#43](https://github.com/hujiulong/vue-3d-model/issues/43)) ([e0468c0](https://github.com/hujiulong/vue-3d-model/commit/e0468c0736a2db001e4a1c4a8747ed0c3bad4a32))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add crossOrigin option(fix [#33](https://github.com/hujiulong/vue-3d-model/issues/33)) ([1c815de](https://github.com/hujiulong/vue-3d-model/commit/1c815de53fea93f5e787c7c8ed3eb58ef610b164))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [1.0.1](https://github.com/hujiulong/vue-3d-model/compare/v1.0.0...v1.0.1) (2018-05-01)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [1.0.0](https://github.com/hujiulong/vue-3d-model/compare/v0.0.15...v1.0.0) (2018-02-08)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [0.0.15](https://github.com/hujiulong/vue-3d-model/compare/3dc003e51745d500d8e7faed945088e70664d029...v0.0.15) (2018-01-03)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* export `model-ply`.([#22](https://github.com/hujiulong/vue-3d-model/issues/22)) ([945930c](https://github.com/hujiulong/vue-3d-model/commit/945930c427e8a9d7c753e3c326b71a56ec78f07d))
|
||||||
|
* fix `on-error` event and add `on-progress` event([#15](https://github.com/hujiulong/vue-3d-model/issues/15)). ([0a92d7b](https://github.com/hujiulong/vue-3d-model/commit/0a92d7b160bdf495dbda47385e83e688874e14a0))
|
||||||
|
* fix `PointLight` not imported in `vue-mixin`([#16](https://github.com/hujiulong/vue-3d-model/issues/16)). ([01427f6](https://github.com/hujiulong/vue-3d-model/commit/01427f6c90159e0e87939e454831b96e0a81347a))
|
||||||
|
* fix rotate example ([5b5535e](https://github.com/hujiulong/vue-3d-model/commit/5b5535e43f8e3b07a43ff90aa7a7a30a064e937d))
|
||||||
|
* update OBJLoader to fix som bugs([#19](https://github.com/hujiulong/vue-3d-model/issues/19)). ([1889732](https://github.com/hujiulong/vue-3d-model/commit/1889732f7bc5055d4ed3c2da5e7accb70dd31d5c))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add `model-gltf` to support the gltf format model. ([ad952a5](https://github.com/hujiulong/vue-3d-model/commit/ad952a58ede84c754e3dc7a5b9be9f462f30d703))
|
||||||
|
* model-obj supports MTL file ([3dc003e](https://github.com/hujiulong/vue-3d-model/commit/3dc003e51745d500d8e7faed945088e70664d029))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2017-present, Jiulong Hu
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
{
|
||||||
|
"_from": "vue-3d-model",
|
||||||
|
"_id": "vue-3d-model@1.4.1",
|
||||||
|
"_inBundle": false,
|
||||||
|
"_integrity": "sha512-IQjpqEjK1OLF/0XgF6O++IvOPLinLQ2aWZQFHxPFoTfPlB4vQW2sgv8EJSqpsIYC/wSCdGlP3CEnv9L3aZHlow==",
|
||||||
|
"_location": "/vue-3d-model",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"type": "tag",
|
||||||
|
"registry": true,
|
||||||
|
"raw": "vue-3d-model",
|
||||||
|
"name": "vue-3d-model",
|
||||||
|
"escapedName": "vue-3d-model",
|
||||||
|
"rawSpec": "",
|
||||||
|
"saveSpec": null,
|
||||||
|
"fetchSpec": "latest"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"#USER",
|
||||||
|
"/"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmmirror.com/vue-3d-model/-/vue-3d-model-1.4.1.tgz",
|
||||||
|
"_shasum": "3d3e415e42ce32520dcc42f5d9e1ddb5e022f3eb",
|
||||||
|
"_spec": "vue-3d-model",
|
||||||
|
"_where": "D:\\ZtProject\\SuzhouVolunteer\\volunteer-pc",
|
||||||
|
"author": {
|
||||||
|
"name": "Jiulong Hu",
|
||||||
|
"email": "me@hujiulong.com"
|
||||||
|
},
|
||||||
|
"bundleDependencies": false,
|
||||||
|
"dependencies": {
|
||||||
|
"three": "^0.135.0"
|
||||||
|
},
|
||||||
|
"deprecated": false,
|
||||||
|
"description": "3D models viewer with vue.js",
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.8",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.8",
|
||||||
|
"@vue/cli-plugin-unit-jest": "~4.5.8",
|
||||||
|
"@vue/cli-service": "~4.5.8",
|
||||||
|
"@vue/eslint-config-airbnb": "^5.0.2",
|
||||||
|
"@vue/test-utils": "^1.0.3",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"chalk": "^4.1.1",
|
||||||
|
"conventional-changelog-cli": "^2.1.1",
|
||||||
|
"enquirer": "^2.3.6",
|
||||||
|
"eslint": "^7.5.0",
|
||||||
|
"eslint-plugin-import": "^2.20.2",
|
||||||
|
"eslint-plugin-vue": "^7.1.0",
|
||||||
|
"execa": "^5.1.1",
|
||||||
|
"less": "^4.1.1",
|
||||||
|
"less-loader": "^10.0.0",
|
||||||
|
"minimist": "^1.2.5",
|
||||||
|
"semver": "^7.3.5",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-router": "^3.3.4",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"yorkie": "^2.0.0"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"src",
|
||||||
|
"LICENSE",
|
||||||
|
"package.json",
|
||||||
|
"preview.gif",
|
||||||
|
"README.md"
|
||||||
|
],
|
||||||
|
"gitHooks": {
|
||||||
|
"commit-msg": "node scripts/verify-commit.js"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"three.js",
|
||||||
|
"component"
|
||||||
|
],
|
||||||
|
"main": "dist/vue-3d-model.umd.js",
|
||||||
|
"name": "vue-3d-model",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": ">=2.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "vue-cli-service build --target lib --name vue-3d-model src/index.js",
|
||||||
|
"build-examples": "vue-cli-service build examples/index.js --dest examples-dist",
|
||||||
|
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||||
|
"dev": "vue-cli-service serve examples/index.js",
|
||||||
|
"gpr-setup": "node scripts/gpr-setup.js",
|
||||||
|
"lint": "vue-cli-service lint src/ tests/ examples/",
|
||||||
|
"lint:fix": "npm run lint -- --fix",
|
||||||
|
"release": "node scripts/release.js",
|
||||||
|
"test": "vue-cli-service test:unit"
|
||||||
|
},
|
||||||
|
"version": "1.4.1"
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 273 KiB |
@ -0,0 +1,67 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
|
import ModelObj from "./model-obj.vue";
|
||||||
|
import ModelFbx from "./model-fbx.vue";
|
||||||
|
import ModelThree from "./model-three.vue";
|
||||||
|
import ModelStl from "./model-stl.vue";
|
||||||
|
import ModelPly from "./model-ply.vue";
|
||||||
|
import ModelCollada from "./model-collada.vue";
|
||||||
|
import ModelGltf from "./model-gltf.vue";
|
||||||
|
|
||||||
|
// alias
|
||||||
|
const ModelJson = Vue.extend(ModelThree, {
|
||||||
|
name: "model-json",
|
||||||
|
});
|
||||||
|
|
||||||
|
const ModelDae = Vue.extend(ModelCollada, {
|
||||||
|
name: "model-dae",
|
||||||
|
});
|
||||||
|
|
||||||
|
const components = [
|
||||||
|
ModelObj,
|
||||||
|
ModelFbx,
|
||||||
|
ModelThree,
|
||||||
|
ModelJson,
|
||||||
|
ModelStl,
|
||||||
|
ModelPly,
|
||||||
|
ModelCollada,
|
||||||
|
ModelDae,
|
||||||
|
ModelGltf,
|
||||||
|
];
|
||||||
|
|
||||||
|
/* eslint-disable no-shadow */
|
||||||
|
const install = (Vue) => {
|
||||||
|
components.forEach((component) => {
|
||||||
|
Vue.component(component.name, component);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof window !== "undefined" && window.Vue) {
|
||||||
|
install(window.Vue);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install,
|
||||||
|
ModelObj,
|
||||||
|
ModelFbx,
|
||||||
|
ModelThree,
|
||||||
|
ModelJson,
|
||||||
|
ModelStl,
|
||||||
|
ModelPly,
|
||||||
|
ModelCollada,
|
||||||
|
ModelDae,
|
||||||
|
ModelGltf,
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
install,
|
||||||
|
ModelObj,
|
||||||
|
ModelFbx,
|
||||||
|
ModelThree,
|
||||||
|
ModelJson,
|
||||||
|
ModelStl,
|
||||||
|
ModelPly,
|
||||||
|
ModelCollada,
|
||||||
|
ModelDae,
|
||||||
|
ModelGltf,
|
||||||
|
};
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<script>
|
||||||
|
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-collada',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'HemisphereLight',
|
||||||
|
position: { x: 0, y: 1, z: 0 },
|
||||||
|
skyColor: 0xaaaaff,
|
||||||
|
groundColor: 0x806060,
|
||||||
|
intensity: 0.2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'DirectionalLight',
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
smoothing: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const loader = new ColladaLoader();
|
||||||
|
loader.setCrossOrigin(this.crossOrigin);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loader,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getObject(collada) {
|
||||||
|
return collada.scene;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<script>
|
||||||
|
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-fbx',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'HemisphereLight',
|
||||||
|
position: { x: 0, y: 1, z: 0 },
|
||||||
|
skyColor: 0xffffff,
|
||||||
|
groundColor: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'DirectionalLight',
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loader: new FBXLoader(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getObject(geometry) {
|
||||||
|
this.animations = geometry.animations;
|
||||||
|
return geometry;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<script>
|
||||||
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-gltf',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'AmbientLight',
|
||||||
|
color: 0xaaaaaa,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'DirectionalLight',
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
gammaOutput: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const loader = new GLTFLoader();
|
||||||
|
loader.setCrossOrigin(this.crossOrigin);
|
||||||
|
loader.setRequestHeader(this.requestHeader);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loader,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load() {
|
||||||
|
if (!this.src) return;
|
||||||
|
|
||||||
|
if (this.object) {
|
||||||
|
this.wrapper.remove(this.object);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loader.load(this.src, (data) => {
|
||||||
|
this.addObject(data.scene);
|
||||||
|
|
||||||
|
this.$emit('on-load');
|
||||||
|
}, (xhr) => {
|
||||||
|
this.$emit('on-progress', xhr);
|
||||||
|
}, (err) => {
|
||||||
|
this.$emit('on-error', err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
<script>
|
||||||
|
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
|
||||||
|
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
|
||||||
|
import { DDSLoader } from "three/examples/jsm/loaders/DDSLoader";
|
||||||
|
import { LoadingManager } from "three/src/loaders/LoadingManager";
|
||||||
|
import { toIndexed } from "./util";
|
||||||
|
import mixin from "./model-mixin.vue";
|
||||||
|
|
||||||
|
// TODO: Better way to handle texture formats
|
||||||
|
const manager = new LoadingManager(); // 0.122+ new api
|
||||||
|
manager.addHandler(/\.dds$/i, new DDSLoader());
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "model-obj",
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: "HemisphereLight",
|
||||||
|
position: { x: 0, y: 1, z: 0 },
|
||||||
|
skyColor: 0xaaaaff,
|
||||||
|
groundColor: 0x806060,
|
||||||
|
intensity: 0.2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "DirectionalLight",
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
smoothing: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
mtlPath: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
mtl: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const objLoader = new OBJLoader(manager);
|
||||||
|
const mtlLoader = new MTLLoader(manager);
|
||||||
|
|
||||||
|
mtlLoader.setCrossOrigin(this.crossOrigin);
|
||||||
|
mtlLoader.setRequestHeader(this.requestHeader);
|
||||||
|
objLoader.setRequestHeader(this.requestHeader);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loader: objLoader,
|
||||||
|
mtlLoader,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
mtl() {
|
||||||
|
this.load();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
process(object) {
|
||||||
|
if (this.smoothing) {
|
||||||
|
object.traverse((child) => {
|
||||||
|
if (child.geometry) {
|
||||||
|
child.geometry = toIndexed(child.geometry);
|
||||||
|
child.geometry.computeVertexNormals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
load() {
|
||||||
|
if (!this.src) return;
|
||||||
|
|
||||||
|
if (this.object) {
|
||||||
|
this.wrapper.remove(this.object);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onLoad = (object) => {
|
||||||
|
if (this.process) {
|
||||||
|
this.process(object);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.addObject(object);
|
||||||
|
|
||||||
|
this.$emit("on-load");
|
||||||
|
};
|
||||||
|
|
||||||
|
const onProgress = (xhr) => {
|
||||||
|
this.$emit("on-progress", xhr);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onError = (err) => {
|
||||||
|
this.$emit("on-error", err);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.mtl) {
|
||||||
|
let { mtlPath } = this;
|
||||||
|
let mtlSrc = this.mtl;
|
||||||
|
|
||||||
|
if (!this.mtlPath) {
|
||||||
|
const result = /^(.*\/)([^/]*)$/.exec(this.mtl);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
mtlPath = result[1];
|
||||||
|
mtlSrc = result[2];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mtlPath) {
|
||||||
|
this.mtlLoader.setPath(mtlPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mtlLoader.load(
|
||||||
|
mtlSrc,
|
||||||
|
(materials) => {
|
||||||
|
materials.preload();
|
||||||
|
|
||||||
|
this.loader
|
||||||
|
.setMaterials(materials)
|
||||||
|
.load(this.src, onLoad, onProgress, onError);
|
||||||
|
},
|
||||||
|
() => {},
|
||||||
|
onError
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.loader.load(this.src, onLoad, onProgress, onError);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<script>
|
||||||
|
import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader';
|
||||||
|
import {
|
||||||
|
Mesh,
|
||||||
|
MeshStandardMaterial,
|
||||||
|
} from 'three';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-ply',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'HemisphereLight',
|
||||||
|
position: { x: 0, y: 1, z: 0 },
|
||||||
|
skyColor: 0xaaaaff,
|
||||||
|
groundColor: 0x806060,
|
||||||
|
intensity: 0.2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'DirectionalLight',
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loader: new PLYLoader(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getObject(geometry) {
|
||||||
|
geometry.computeVertexNormals();
|
||||||
|
|
||||||
|
return new Mesh(geometry, new MeshStandardMaterial());
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<script>
|
||||||
|
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
|
||||||
|
import {
|
||||||
|
Mesh,
|
||||||
|
MeshPhongMaterial,
|
||||||
|
} from 'three';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-stl',
|
||||||
|
mixins: [mixin],
|
||||||
|
props: {
|
||||||
|
lights: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'HemisphereLight',
|
||||||
|
position: { x: 0, y: 1, z: 0 },
|
||||||
|
skyColor: 0xaaaaff,
|
||||||
|
groundColor: 0x806060,
|
||||||
|
intensity: 0.2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'DirectionalLight',
|
||||||
|
position: { x: 1, y: 1, z: 1 },
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.8,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loader: new STLLoader(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getObject(geometry) {
|
||||||
|
return new Mesh(geometry, new MeshPhongMaterial());
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import { ObjectLoader } from 'three';
|
||||||
|
import mixin from './model-mixin.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'model-three',
|
||||||
|
mixins: [mixin],
|
||||||
|
data() {
|
||||||
|
const loader = new ObjectLoader();
|
||||||
|
loader.setCrossOrigin(this.crossOrigin);
|
||||||
|
loader.setRequestHeader(this.requestHeader);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loader,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
import {
|
||||||
|
Box3, Vector3, Vector2, BufferAttribute,
|
||||||
|
} from 'three';
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
const box = new Box3();
|
||||||
|
|
||||||
|
function getSize(object) {
|
||||||
|
box.setFromObject(object);
|
||||||
|
|
||||||
|
return box.getSize(new Vector3());
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCenter(object) {
|
||||||
|
box.setFromObject(object);
|
||||||
|
|
||||||
|
return box.getCenter(new Vector3());
|
||||||
|
}
|
||||||
|
|
||||||
|
// function lightsDiff(lights, oldLights) {
|
||||||
|
// }
|
||||||
|
|
||||||
|
function toIndexed(bufferGeometry) {
|
||||||
|
const rawPositions = bufferGeometry.getAttribute('position').array;
|
||||||
|
|
||||||
|
let rawUvs;
|
||||||
|
const hasUV = bufferGeometry.getAttribute('uv') !== undefined;
|
||||||
|
if (hasUV) rawUvs = bufferGeometry.getAttribute('uv').array;
|
||||||
|
|
||||||
|
let rawNormals;
|
||||||
|
const hasNormal = bufferGeometry.getAttribute('normal') !== undefined;
|
||||||
|
if (hasNormal) rawNormals = bufferGeometry.getAttribute('normal').array;
|
||||||
|
|
||||||
|
const indices = [];
|
||||||
|
const vertices = [];
|
||||||
|
const normals = [];
|
||||||
|
const uvs = [];
|
||||||
|
|
||||||
|
let face; let faceNormalss; let faceUvs; let
|
||||||
|
tmpIndices;
|
||||||
|
|
||||||
|
const v0 = new Vector3();
|
||||||
|
const v1 = new Vector3();
|
||||||
|
const v2 = new Vector3();
|
||||||
|
|
||||||
|
const n0 = new Vector3();
|
||||||
|
const n1 = new Vector3();
|
||||||
|
const n2 = new Vector3();
|
||||||
|
|
||||||
|
const uv0 = new Vector2();
|
||||||
|
const uv1 = new Vector2();
|
||||||
|
const uv2 = new Vector2();
|
||||||
|
|
||||||
|
for (let i = 0; i < rawPositions.length; i += 9) {
|
||||||
|
v0.x = rawPositions[i];
|
||||||
|
v0.y = rawPositions[i + 1];
|
||||||
|
v0.z = rawPositions[i + 2];
|
||||||
|
|
||||||
|
v1.x = rawPositions[i + 3];
|
||||||
|
v1.y = rawPositions[i + 4];
|
||||||
|
v1.z = rawPositions[i + 5];
|
||||||
|
|
||||||
|
v2.x = rawPositions[i + 6];
|
||||||
|
v2.y = rawPositions[i + 7];
|
||||||
|
v2.z = rawPositions[i + 8];
|
||||||
|
|
||||||
|
face = [v0, v1, v2];
|
||||||
|
|
||||||
|
if (hasNormal) {
|
||||||
|
n0.x = rawNormals[i];
|
||||||
|
n0.y = rawNormals[i + 1];
|
||||||
|
n0.z = rawNormals[i + 2];
|
||||||
|
|
||||||
|
n1.x = rawNormals[i + 3];
|
||||||
|
n1.y = rawNormals[i + 4];
|
||||||
|
n1.z = rawNormals[i + 5];
|
||||||
|
|
||||||
|
n2.x = rawNormals[i + 6];
|
||||||
|
n2.y = rawNormals[i + 7];
|
||||||
|
n2.z = rawNormals[i + 8];
|
||||||
|
|
||||||
|
faceNormalss = [n0, n1, n2];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasUV) {
|
||||||
|
uv0.x = rawUvs[i];
|
||||||
|
uv0.y = rawUvs[i + 1];
|
||||||
|
|
||||||
|
uv1.x = rawUvs[i + 2];
|
||||||
|
uv1.y = rawUvs[i + 3];
|
||||||
|
|
||||||
|
uv2.x = rawUvs[i + 4];
|
||||||
|
uv2.y = rawUvs[i + 5];
|
||||||
|
|
||||||
|
faceUvs = [uv0, uv1, uv2];
|
||||||
|
}
|
||||||
|
|
||||||
|
tmpIndices = [];
|
||||||
|
|
||||||
|
face.forEach((v, i) => {
|
||||||
|
let id = exists(v, vertices);
|
||||||
|
if (id === -1) {
|
||||||
|
id = vertices.length;
|
||||||
|
vertices.push(v.clone());
|
||||||
|
|
||||||
|
if (hasNormal) normals.push(faceNormalss[i].clone());
|
||||||
|
if (hasUV) uvs.push(faceUvs[i].clone());
|
||||||
|
}
|
||||||
|
tmpIndices.push(id);
|
||||||
|
});
|
||||||
|
|
||||||
|
indices.push(tmpIndices[0], tmpIndices[1], tmpIndices[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const positionBuffer = new Float32Array(vertices.length * 3);
|
||||||
|
|
||||||
|
let normalBuffer; let
|
||||||
|
uvBuffer;
|
||||||
|
|
||||||
|
if (hasNormal) normalBuffer = new Float32Array(vertices.length * 3);
|
||||||
|
if (hasUV) uvBuffer = new Float32Array(vertices.length * 2);
|
||||||
|
|
||||||
|
let i2 = 0;
|
||||||
|
let i3 = 0;
|
||||||
|
for (let i = 0; i < vertices.length; i++) {
|
||||||
|
i3 = i * 3;
|
||||||
|
|
||||||
|
positionBuffer[i3] = vertices[i].x;
|
||||||
|
positionBuffer[i3 + 1] = vertices[i].y;
|
||||||
|
positionBuffer[i3 + 2] = vertices[i].z;
|
||||||
|
|
||||||
|
if (hasNormal) {
|
||||||
|
normalBuffer[i3] = normals[i].x;
|
||||||
|
normalBuffer[i3 + 1] = normals[i].y;
|
||||||
|
normalBuffer[i3 + 2] = normals[i].z;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasUV) {
|
||||||
|
i2 = i * 2;
|
||||||
|
uvBuffer[i2] = uvs[i].x;
|
||||||
|
uvBuffer[i2 + 1] = uvs[i].y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bufferGeometry.addAttribute('position', new BufferAttribute(positionBuffer, 3));
|
||||||
|
if (hasNormal) bufferGeometry.addAttribute('normal', new BufferAttribute(normalBuffer, 3));
|
||||||
|
if (hasUV) bufferGeometry.addAttribute('uv', new BufferAttribute(uvBuffer, 2));
|
||||||
|
bufferGeometry.setIndex(new BufferAttribute(new Uint32Array(indices), 1));
|
||||||
|
return bufferGeometry;
|
||||||
|
|
||||||
|
function exists(v, vertices) {
|
||||||
|
for (let i = 0; i < vertices.length; i++) {
|
||||||
|
if (v.equals(vertices[i])) return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getSize, getCenter, toIndexed };
|
||||||
Loading…
Reference in new issue