{"id":537,"date":"2023-01-28T10:33:32","date_gmt":"2023-01-28T02:33:32","guid":{"rendered":"http:\/\/gjweb.top\/?p=537"},"modified":"2023-01-28T10:33:33","modified_gmt":"2023-01-28T02:33:33","slug":"planthree-%e7%ae%80%e6%98%93%e5%8c%96%e7%9a%84-threejs","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=537","title":{"rendered":"planThree \u7b80\u6613\u5316\u7684 ThreeJS"},"content":{"rendered":"\n

\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n \n \"uuid4\"\n <\/a>\n

\n
<\/div><\/a>\n <\/div>\n\n\n\n

\u672c\u63d2\u4ef6\u662f\u57fa\u4e8e ThreeJs \u7684\u4e8c\u6b21\u5c01\u88c5, \u53ef\u4ee5\u8ba9\u4f7f\u7528\u8005\u901a\u8fc7API\u8c03\u7528\u65b9\u5f0f\u5feb\u901f\u521b\u5efa\u81ea\u5df1\u7684Three\u573a\u666f, \u5de5\u5177\u5e93\u4e2d\u63d0\u4f9b\u4e86\u57fa\u7840\u4ea4\u4e92\u529f\u80fd,\u66f4\u591a\u529f\u80fd\u6301\u7eed\u66f4\u65b0\u4e2d<\/p>\n\n\n\n

\u5b89\u88c5<\/h2>\n\n\n\n
npm install plain-three -S\nor \nyarn add plain-three -S\nor\npnpm install plain-three<\/code><\/pre>\n\n\n\n
\u5f15\u5165<\/h2>\n\n\n\n
import PlainThree from \"plain-three\"<\/code><\/pre>\n\n\n\n
\u4f7f\u7528\u6587\u6863<\/h2>\n\n\n\n
1. \u5b9e\u4f8b\u5316\u5b9e\u4f8b<\/h3>\n\n\n\n
\u4ee3\u7801\u5b9e\u4f8b<\/p>\n\n\n\n
const app = PlainThree({
    elementId: \"scene\",
    cameraPosition:[50,50,130],
    FPS:120,
    logarithmicDepthBuffer:true,
    physicallyCorrectLights:true
});<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u8bf4\u660e<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
elementId<\/td>string<\/td>\u662f<\/td>\u5b9e\u4f8b\u6302\u8f7d\u7684HTML\u5143\u7d20\u7684id<\/td><\/tr>
cameraPosition<\/td>array[number]<\/td>\u5426<\/td>\u76f8\u673a\u7684\u4f4d\u7f6e<\/td><\/tr>
FPS<\/td>number<\/td>\u5426<\/td>\u6a21\u578b\u6e32\u67d3\u7684\u5e27\u7387 \u9ed8\u8ba410<\/td><\/tr>
logarithmicDepthBuffer<\/td>boolean<\/td>\u5426<\/td>\u5f00\u542f\u6027\u80fd\u4f18\u5316. \u9ed8\u8ba4\u4e3a false<\/td><\/tr>
physicallyCorrectLights<\/td>boolean<\/td>\u5426<\/td>\u5f00\u542f\u7269\u7406\u5149\u7167 \u9ed8\u8ba4\u4e3a false<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
2. \u521b\u5efa\u573a\u666f\u6a21\u578b<\/h3>\n\n\n\n
\u4ee3\u7801\u793a\u4f8b<\/p>\n\n\n\n
 await app.createSceneModule({
     rootPath: \".\/module\/\",
     moduleFile: \"xxx.gltf\",
     userData: {
         key: \"\u6a21\u578b\u5c5e\u6027\",
         key2: \"\u6a21\u578b\u5c5e\u60272\",
         ...
     },
     moduleName: \"\u6a21\u578b\u540d\u79f0\",
})<\/code><\/pre>\n\n\n\n
createSceneModule\u8fd4\u56de\u4e00\u4e2a promise \u5bf9\u8c61, \u6210\u529f\u8fd4\u56de\u6a21\u578b\u7684\u5b9e\u4f8b\u5bf9\u8c61\uff08\u53ef\u7528\u4e8e\u6a21\u578b\u5b9e\u4f8b\u7684\u4e8c\u6b21\u5f00\u53d1\uff09\uff0c\u5931\u8d25\u5219\u8fd4\u56de\u9519\u8bef\u4fe1\u606f<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
rootPath<\/td>string<\/td>\u662f<\/td>\u914d\u7f6e\u8def\u5f84\u7684\u6839\u76ee\u5f55<\/td><\/tr>
moduleFile<\/td>string<\/td>\u662f<\/td>\u914d\u7f6e\u8def\u5f84\u7684\u6587\u4ef6<\/td><\/tr>
userData<\/td>object<\/td>\u662f<\/td>\u81ea\u5b9a\u4e49\u6570\u636e\u96c6\u5408<\/td><\/tr>
moduleName<\/td>string<\/td>\u662f<\/td>\u6a21\u578b\u540d\u79f0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
3.\u521b\u5efa\u7269\u4f53<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
await app.createParts({
    rootPath: \"\/car\/\",
    moduleFile: \"acura-rlx-2021.quads.gltf\",
    position: [0, 1, 0],
    zoom:[0,0,0]
    userData: {
        name: \"\u8f66\u8f86\",
        carCode: \"\u4eacB2022\",
    },
    moduleName: \"\u8f66\u8f86\",
});<\/code><\/pre>\n\n\n\n
\u5728V1.0.4\u7248\u672c\u4e2d\uff0c\u652f\u6301\u5bf9\u6a21\u578b\u7684\u5e27\u52a8\u753b\u64cd\u4f5c<\/strong>\uff1bcreateParts\u8fd4\u56de\u4e00\u4e2a promise \u5bf9\u8c61,\u6210\u529f\u8fd4\u56de\u5bf9\u8c61\u5b9e\u4f8b\u548c\u5173\u952e\u5e27\u52a8\u753b\u5b9e\u4f8b ,\u5931\u8d25\u8fd4\u56de\u62a5\u9519\u4fe1\u606f\u3002<\/p>\n\n\n\n
\u8fd4\u56de\u793a\u4f8b<\/p>\n\n\n\n
{
    gltf:{}, \/\/ \u6a21\u578b\u5bf9\u8c61
    ItemAnimations:{ \/\/\u52a8\u753b\u5c5e\u6027
        id:'' , \/\/\u751f\u6210\u5f53\u524d\u8be5\u6a21\u578b\u52a8\u753b\u7684uuid\uff0c
        example:\"\", \/\/ \u5f53\u524d\u7684\u52a8\u753b\u52a0\u8f7d\u5668\u5b9e\u4f8b
        animationAction\uff1aexampleItem.clipAction(gltf.animations[2], \/\/ \u5f53\u524d\u7684\u52a8\u753b\u6e90
    }
}<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
rootPath<\/td>string<\/td>\u662f<\/td>\u6a21\u578b\u6839\u76ee\u5f55<\/td><\/tr>
moduleFile<\/td>string<\/td>\u662f<\/td>\u6a21\u578b\u6587\u4ef6\u540d<\/td><\/tr>
userData<\/td>object<\/td>\u662f<\/td>\u81ea\u5b9a\u4e49\u6570\u636e\u96c6\u5408<\/td><\/tr>
moduleName<\/td>string<\/td>\u662f<\/td>\u6a21\u578b\u540d\u79f0<\/td><\/tr>
position<\/td>array<\/td>\u662f<\/td>\u6a21\u578b\u4f4d\u7f6e<\/td><\/tr>
zoom<\/td>arrat<\/td>\u662f<\/td>\u6a21\u578b\u7f29\u653e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
4. \u67e5\u627e\u7269\u4f53<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
app.getQuery(\"\u8f66\u8f86\")<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
<\/td>string<\/td>\u662f<\/td>\u67e5\u627e\u6a21\u578b\u7684moduleName\u503c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u6ce8\u610f: \u6539\u65b9\u6cd5\u53ea\u6709\u5728\u6a21\u578b\u6e32\u67d3\u5b8c\u6210\u540e\u624d\u53ef\u4ee5\u8c03\u7528<\/strong><\/p>\n\n\n\n
\n\n\n\n
5.\u521b\u5efa\u6807\u6ce8<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
app.createMarker({
    name:'\u8f66\u8f86',
    url:\"\u56fe\u7247\u7684CDN\u5730\u5740,\u63a8\u8350\u4f7f\u7528\u7ebf\u4e0a\u7684\u8d44\u6e90\",
    position:[0,2,5],
    scale:[1,1,1],
    userData:{
        name:\"\u8f66\u8f86\u7684\u6807\u6ce8\"
    },
    thingData:this.app.getQuery(\"\u8f66\u8f86\")
})<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
\u914d\u7f6e\u9879<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
alias<\/td>string<\/td>\u662f<\/td>\u6807\u6ce8\u7684\u522b\u540d<\/td><\/tr>
thingData<\/td>object<\/td>\u662f<\/td>\u8868\u793a\u6807\u6ce8\u7269\u4f53\u7236\u96c6\u7ec4\u5bf9\u8c61<\/td><\/tr>
name<\/td>string<\/td>\u662f<\/td>\u9700\u8981\u6807\u6ce8\u7684\u7269\u4f53\u7684\u540d\u79f0<\/td><\/tr>
url<\/td>string<\/td>\u662f<\/td>\u56fe\u7247\u5730\u5740(CDN\u65b9\u5f0f)<\/td><\/tr>
position<\/td>array[number]<\/td>\u662f<\/td>\u6807\u6ce8\u7684\u504f\u79fb\u91cf[x,y,z]<\/td><\/tr>
scale<\/td>array[number]<\/td>\u662f<\/td>\u56fe\u7247\u7684\u7f29\u653e\u5927\u5c0f[x,y,z]<\/td><\/tr>
userData<\/td>object<\/td>\u5426<\/td>\u9884\u7559\u5c5e\u6027\u7528\u4e8e\u5b58\u653e\u6807\u6ce8\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
6. \u9690\u85cf\u6807\u6ce8<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
app.clearMarker({name:this.deviceName})<\/code><\/pre>\n\n\n\n
\u53c2\u6570\u914d\u7f6e<\/p>\n\n\n\n
\u53c2\u6570<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
name<\/td>string<\/td>\u662f<\/td>\u67e5\u627e\u6807\u6ce8\u7684name (\u6807\u51c6\u7684\u7c7b\u578b\u662fSprite, \u4f4d\u7f6e\u5728\u5168\u5c40\u7684group\u7684children\u96c6\u5408\u91cc\u9762), \u4f8b\u5982: xxx.obj.parent.name<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
7. \u9690\u85cf\u7269\u4f53<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
let state = app.getQuery(\"\u8f66\u8f86\").visible
app.hideThing(\"\u8f66\u8f86\",!state)<\/code><\/pre>\n\n\n\n
\u53c2\u6570\u914d\u7f6e<\/p>\n\n\n\n
\u53c2\u6570<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
name<\/td>string<\/td>\u662f<\/td>\u6a21\u578b\u7684moduleName\u503c<\/td><\/tr>
state<\/td>boole<\/td>\u662f<\/td>\u6a21\u578b\u662f\u5426\u9690\u85cf<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
8. \u6e05\u9664\u573a\u666f<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
app.clearScene();<\/code><\/pre>\n\n\n\n
\n\n\n\n
9.\u6ce8\u518c\u70b9\u51fb\u4e8b\u4ef6<\/h3>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
window.addEventListener(\"dblclick\", (event) => {
    let result = this.app.click(event);
    console.log(\"\u70b9\u51fb\u4e8b\u4ef6\", result);
});<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u9879<\/p>\n\n\n\n
\u53c2\u6570<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u5fc5\u586b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
event<\/td>object<\/td>\u662f<\/td>\u70b9\u51fb\u662f\u89e6\u53d1\u7684HTMLDOM\u7684event\u5bf9\u8c61<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u8fd4\u56de\u503c eventInfo<\/strong><\/p>\n\n\n\n
\u5c5e\u6027\u540d<\/th>\u7c7b\u578b<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
obj<\/td>object<\/td>\u5f53\u524d\u9f20\u6807\u70b9\u51fb\u62fe\u53d6\u7269\u4f53<\/td><\/tr>
point<\/td>array[number]<\/td>\u5f53\u524d\u9f20\u6807\u70b9\u51fb\u7684\u573a\u666f\u5750\u6807[x,y,z]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
10.\u5916\u90e8\u6a21\u578b\u7684\u5173\u952e\u5e27\u52a8\u753b\u4f7f\u7528<\/h3>\n\n\n\n
\u53c2\u8003\u7b2c\u4e09\u8282\u7684\u521b\u5efa\u7269\u4f53\u540e\u8fd4\u56de\u7684\u5b9e\u4f8b\u5bf9\u8c61<\/p>\n\n\n\n
\u4ee3\u7801\u793a\u4f8b<\/p>\n\n\n\n
 var botany = await this.app.createParts({
     rootPath:\".\/threeModule\/zhizhu\/\",
     moduleFile: \"zhizhu.glb\",
     position: [-15,5,20],
     zoom:[2,2,2],
     moduleName: \"\u8718\u86db\",
})
console.log(\"\u8718\u86db\u6a21\u578b\",botany) \/\/ \u6b64\u65f6\u7684\u53d8\u91cf\u5df2\u7ecf\u8fd4\u56de\u4e86\u6a21\u578b\u5b9e\u4f8b\u548c\u52a8\u753b\u5b9e\u4f8b
\/\/\u64ad\u653e\u5e27\u52a8\u753b
let {exampleItem,ItemAnimations} = botany.animation;
ItemAnimations.animationAction = exampleItem.clipAction(this.insect.gltf.animations[index])
ItemAnimations.animationAction.play()
\u200b
\/*\u5982\u679c\u51fa\u53bb\u52a8\u753b\u505c\u6b62\uff0c\u6216\u8005\u5207\u6362\u52a8\u753b\u65f6\uff0c\u9700\u8981\u8c03\u7528stop()\u505c\u6b62\u5f53\u524d\u7684\u52a8\u753b*\/
ItemAnimations.animationAction.stop()<\/code><\/pre>\n\n\n\n
11. HTML\u6807\u6ce8\u4fe1\u606f<\/h3>\n\n\n\n
this.app.createHtml(options)<\/code><\/pre>\n\n\n\n
\u53c2\u6570<\/p>\n\n\n\n
\u53c2\u6570<\/th>\u7c7b\u578b<\/th>\u662f\u5426\u9009\u586b<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
HTMLId<\/td>string<\/td>\u662f<\/td>\u4f20\u9012\u6a21\u578b\u7684uuid\uff0c\u7528\u4e8ehtml\u7684\u552f\u4e00\u6807\u8bc6<\/td><\/tr>
Mesh<\/td>object<\/td>\u662f<\/td>\u6a21\u578b\u7684\u5b9e\u4f8b\u5bf9\u8c61<\/td><\/tr>
position<\/td>array[x:number,y:number]<\/td>\u662f<\/td>\u7528\u4e8e\u9644\u52a0HTML\u6d6e\u7a97\u7684\u4f4d\u7f6e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u793a\u4f8b<\/p>\n\n\n\n
const moduleHtmlData = []; \/\/ \u7528\u4e8e\u5b58\u653e\u6bcf\u4e2a\u6a21\u578b\u7684id\u548c\u6570\u636e\uff0c\u7528\u4e8eHTML\u5faa\u73af\u521b\u5efa\u5143\u7d20
var botany = await this.app.createParts(options) \/\/\u521b\u5efa\u5916\u90e8\u6a21\u578b
var {scene} = this.botany.gltf;
moduleHtmlData.push({
    uuid:scene.uuid,
    htmlValue:{
      title:\"xxx\",
      w:\"xxx\",
      w2:\"xxx\"
    }
})
this.app.createHtml({
    HTMLId:scene.uuid,
    Mesh:scene,
    position:[40,-130]
})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u672c\u63d2\u4ef6\u662f\u57fa\u4e8e ThreeJs \u7684\u4e8c\u6b21\u5c01\u88c5, \u53ef\u4ee5\u8ba9\u4f7f\u7528\u8005\u901a\u8fc7API\u8c03\u7528\u65b9\u5f0f\u5feb\u901f\u521b\u5efa\u81ea\u5df1\u7684Three\u573a\u666f, \u5de5\u5177 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-58"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=537"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/537\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/537\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}