Title: Code Three 3D Interactive
Author: Kauri Beguely
Published: <strong>2025 年 7 月 30 日</strong>
Last modified: 2025 年 7 月 31 日

---

搜索插件

![](https://ps.w.org/code-three-3d-interactive/assets/banner-772x250.jpg?rev=3336550)

![](https://ps.w.org/code-three-3d-interactive/assets/icon-256x256.gif?rev=3336550)

# Code Three 3D Interactive

 作者：[Kauri Beguely](https://profiles.wordpress.org/kauribeguely/)

[下载](https://downloads.wordpress.org/plugin/code-three-3d-interactive.1.0.0.zip)

 * [详情](https://cn.wordpress.org/plugins/code-three-3d-interactive/#description)
 * [评价](https://cn.wordpress.org/plugins/code-three-3d-interactive/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/code-three-3d-interactive/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/code-three-3d-interactive/#developers)

 [支持](https://wordpress.org/support/plugin/code-three-3d-interactive/)

## 描述

**Code 3** lets you embed multi-object, interactive 3D scenes into your WordPress
site using a simple shortcode.

[Live Demo – Multiple Scenes](https://c33d.kaurib.com/)

Ideal for developers, designers, and digital creatives who want to create engaging
3D web experiences — without hardcoding them into templates.

#### Features

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

#### How It Works

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

#### Shortcode Examples

    ```
    [codes_scene id="39"]
    ```

By default the width will be 100% of the container the shortcode is placed and the
height will be 500px

    ```
    [codes_scene id="39" width="500px" height="30vh"]
    ```

Set custom height and width of the shortcode, accepts all CSS measurements.

## 屏幕截图

 * [[
 * User Interface with a single object scene. Object tab active on right.
 * [[
 * Multi object (demo scene ‘Scrolling Phones’). Animation tab active on right.
 * [[
 * The same scene shortcode used in two different designs (with Elementor)
 * [[
 * Lamborghini scene in an Elementor section. Linked to mouse move.

## 安装

Installing and activating via the plugin repository is all that’s needed.

Basic intro guides/tutorials coming soon.

## 常见问题

### I added a model, why can’t I see it?

The most likely is the model size is huge/tiny. Try scaling it up or down (sometimes
a lot).

### Why is my model is completely black?

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.

### My scene looks smaller that I made it

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.

### My scene looks broken on mobile

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.

### What model formats are accepted?

Just glb/gltf for now. More coming soon.

## 评价

此插件暂无评价。

## 贡献者及开发者

「Code Three 3D Interactive」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ Kauri Beguely ](https://profiles.wordpress.org/kauribeguely/)

[帮助将「Code Three 3D Interactive」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/code-three-3d-interactive)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/code-three-3d-interactive/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/code-three-3d-interactive/)，或通过
[RSS](https://plugins.trac.wordpress.org/log/code-three-3d-interactive/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/code-three-3d-interactive/)。

## 更新日志

#### 1.0.0

 * Initial release
 * Upload/Add GLB
 * Add images as scene objects
 * Clone/Delete scene objects
 * Change all transforms of models (gizmo/hotkeys)
 * Default lights, adjustable intensity, directional light can be positioned
 * Insert scenes via shortcodes (can set width and height within these)
 * Allows multiple shortcode instances on the same page
 * Scroll link to camera position animation
 * Mouse move link to scene rotation animation
 * Download demo models/scenes
 * Set separate scene arrangement for a defined breakpoint
 * Add groups that can hold objects (like a null object)

## 额外信息

 *  版本 **1.0**
 *  最后更新：**10 月前**
 *  活跃安装数量 **10+**
 *  WordPress 版本 ** 6.2 或更高版本 **
 *  已测试的最高版本为 **6.8.5**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/code-three-3d-interactive/)
 * 标签
 * [3d](https://cn.wordpress.org/plugins/tags/3d/)[animation](https://cn.wordpress.org/plugins/tags/animation/)
   [interactive](https://cn.wordpress.org/plugins/tags/interactive/)[three.js](https://cn.wordpress.org/plugins/tags/three-js/)
 *  [高级视图](https://cn.wordpress.org/plugins/code-three-3d-interactive/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/code-three-3d-interactive/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/code-three-3d-interactive/reviews/)

## 贡献者

 *   [ Kauri Beguely ](https://profiles.wordpress.org/kauribeguely/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/code-three-3d-interactive/)