whitestorm.js简单应用程序在线示例

whitestorm.js是一款基于three.js和Physi.js的3D物理世界应用程序开发框架。

whitestorm.js, whs, three, physics

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3091
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const app = new WHS.App([
    new WHS.ElementModule({
        container: document.getElementById('app')
    }),
    new WHS.SceneModule(),
    new WHS.CameraModule({
        position: {
            y: 10,
            z: 50
        }
    }),
    new WHS.RenderingModule({
        bgColor: 0x162129,

renderer: {
            antialias: true,
            shadowmap: {
                type: THREE.PCFSoftShadowMap
            }
        }
    }, {
        shadow: true
    }),
    new WHS.OrbitControlsModule(),
    new WHS.ResizeModule()
]);

// Sphere
const sphere = new WHS.Sphere({ // Create sphere comonent.
    geometry: {
        radius: 5,
        widthSegments: 32,
        heightSegments: 32
    },

material: new THREE.MeshPhongMaterial({
        color: 0xF2F2F2
    }),

position: new THREE.Vector3(0, 5, 0)
});

sphere.addTo(app);

// Plane
new WHS.Plane({
    geometry: {
        width: 100,
        height: 100
    },

material: new THREE.MeshPhongMaterial({
        color: 0x447F8B
    }),

rotation: {
        x: -Math.PI / 2
    }
}).addTo(app);

// Lights
new WHS.PointLight({
    light: {
        intensity: 0.5,
        distance: 100
    },

shadow: {
        fov: 90
    },

position: new THREE.Vector3(0, 10, 10)
}).addTo(app);

new WHS.AmbientLight({
    light: {
        intensity: 0.4
    }
}).addTo(app);

// Start the app
app.start();

编译

CSS

HTML

whitestorm.js是一款基于three.js和Physi.js的3D物理世界应用程序开发框架。

whitestorm.js, whs, three, physics

编辑器支持Emmet

快捷键

whitestorm.js是一款基于three.js和Physi.js的3D物理世界应用程序开发框架。

whitestorm.js, whs, three, physics

three.js使用havok物理引擎代码示例

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：