{"id":238791,"date":"2025-07-30T10:50:05","date_gmt":"2025-07-30T10:50:05","guid":{"rendered":"https:\/\/en-au.wordpress.org\/plugins\/code-three-3d-interactive\/"},"modified":"2025-07-31T10:21:59","modified_gmt":"2025-07-31T10:21:59","slug":"code-three-3d-interactive","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/code-three-3d-interactive\/","author":23122244,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0","stable_tag":"1.0.0","tested":"6.8.5","requires":"6.2","requires_php":"7.4","requires_plugins":null,"header_name":"Code Three 3D Interactive","header_author":"Kauri Beguely","header_description":"Easy 3D\/3JS scenes. Take WordPress to the next dimension.","assets_banners_color":"1c1d23","last_updated":"2025-07-31 10:21:59","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":10,"downloads":864,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"kauribeguely","date":"2025-07-31 10:21:59"}},"upgrade_notice":{"1.0.0":"

Initial Release<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.gif":{"filename":"icon-128x128.gif","revision":3336550,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3336550,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3336550,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3336550,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3336550,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3336550,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3336550,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3336550,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"User Interface with a single object scene. Object tab active on right.","2":"Multi object (demo scene 'Scrolling Phones'). Animation tab active on right.","3":"The same scene shortcode used in two different designs (with Elementor)","4":"Lamborghini scene in an Elementor section. Linked to mouse move."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[783,785,451,245614,147250],"plugin_category":[50],"plugin_contributors":[245615],"plugin_business_model":[],"class_list":["post-238791","plugin","type-plugin","status-publish","hentry","plugin_tags-3d","plugin_tags-animation","plugin_tags-interactive","plugin_tags-multi-object","plugin_tags-three-js","plugin_category-media","plugin_contributors-kauribeguely","plugin_committers-kauribeguely"],"banners":{"banner":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/banner-772x250.jpg?rev=3336550","banner_2x":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/banner-1544x500.jpg?rev=3336550","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/icon-128x128.gif?rev=3336550","icon_2x":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/icon-256x256.gif?rev=3336550","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/screenshot-1.jpg?rev=3336550","caption":"User Interface with a single object scene. Object tab active on right."},{"src":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/screenshot-2.jpg?rev=3336550","caption":"Multi object (demo scene 'Scrolling Phones'). Animation tab active on right."},{"src":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/screenshot-3.jpg?rev=3336550","caption":"The same scene shortcode used in two different designs (with Elementor)"},{"src":"https:\/\/ps.w.org\/code-three-3d-interactive\/assets\/screenshot-4.jpg?rev=3336550","caption":"Lamborghini scene in an Elementor section. Linked to mouse move."}],"raw_content":"\n

Code 3<\/strong> lets you embed multi-object, interactive 3D scenes into your WordPress site using a simple shortcode.<\/p>\n\n

https:\/\/youtu.be\/fJ0IEpl0zS4<\/p>\n\n

Live Demo - Multiple Scenes<\/a><\/p>\n\n

Ideal for developers, designers, and digital creatives who want to create engaging 3D web experiences \u2014 without hardcoding them into templates.<\/p>\n\n

Features<\/h4>\n\n
    \n
  • Upload multiple GLB models to a scene and change their transforms (position, rotation, scale)<\/li>\n
  • Add images from media library as objects in the scene (fully transformable)<\/li>\n
  • Embed 3D scenes via shortcode<\/li>\n
  • Mousemove and scroll interaction<\/li>\n
  • Switch between Orthographic and Isometric camera<\/li>\n
  • Build a seperate composition for a defined breakpoint<\/li>\n<\/ul>\n\n

    How It Works<\/h4>\n\n
      \n
    1. After clicking Add New Scene, you can add models by uploading GLB to the media library<\/li>\n
    2. You can change all objects position\/rotation\/scale in the scene editor<\/li>\n
    3. You change global settings like light intensity and scroll\/mouse interaction<\/li>\n
    4. Place the shortcode anywhere you want it to display<\/li>\n<\/ol>\n\n

      Shortcode Examples<\/h4>\n\n
      [codes_scene id=\"39\"]\n<\/code><\/pre>\n\n
      By default the width will be 100% of the container the shortcode is placed and the height will be 500px<\/p>\n\n
      [codes_scene id=\"39\" width=\"500px\" height=\"30vh\"]\n<\/code><\/pre>\n\n
      Set custom height and width of the shortcode, accepts all CSS measurements.<\/p>\n\n\n
      Installing and activating via the plugin repository is all that's needed.<\/p>\n\n
      Basic intro guides\/tutorials coming soon.<\/p>\n\n\n
      \n
      I added a model, why can't I see it?<\/h3><\/dt>\n
      The most likely is the model size is huge\/tiny. Try scaling it up or down (sometimes a lot).<\/p><\/dd>\n
      Why is my model is completely black?<\/h3><\/dt>\n
      Either lighting or materials are not setup correctly. Try change the light intensity or toggle environment light. If it's a material issue you need to fix the model in a 3D software e.g. blender or find a new one.<\/p><\/dd>\n
      My scene looks smaller that I made it<\/h3><\/dt>\n
      The scene size is based on the height\/width of the canvas. The editor canvas is large, almost the whole screen. You can either make the container that holds the shortcode bigger, change the width\/height values in the shortcode itself or adjust scales of objects in the editor.<\/p><\/dd>\n
      My scene looks broken on mobile<\/h3><\/dt>\n
      Within the editor you can move all objects into a different layout (click mobile view at the top of the builder UI) beyond a defined breakpoint (set via setting icon in top right of builder). If you want to stop this happening, just set the breakpoint to something tiny like 1px.<\/p><\/dd>\n
      What model formats are accepted?<\/h3><\/dt>\n
      Just glb\/gltf for now. More coming soon.<\/p><\/dd>\n\n<\/dl>\n\n\n
      1.0.0<\/h4>\n\n
        \n
      • Initial release<\/li>\n
      • Upload\/Add GLB<\/li>\n
      • Add images as scene objects<\/li>\n
      • Clone\/Delete scene objects<\/li>\n
      • Change all transforms of models (gizmo\/hotkeys)<\/li>\n
      • Default lights, adjustable intensity, directional light can be positioned<\/li>\n
      • Insert scenes via shortcodes (can set width and height within these)<\/li>\n
      • Allows multiple shortcode instances on the same page<\/li>\n
      • Scroll link to camera position animation<\/li>\n
      • Mouse move link to scene rotation animation<\/li>\n
      • Download demo models\/scenes<\/li>\n
      • Set separate scene arrangement for a defined breakpoint<\/li>\n
      • Add groups that can hold objects (like a null object)<\/li>\n<\/ul>","raw_excerpt":"Easily build animated\/interactive 3D scenes and embed using a shortcode. Take your site to the next dimension. Powered by Three.js","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/238791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=238791"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kauribeguely"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=238791"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=238791"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=238791"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=238791"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=238791"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=238791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}