JSFiddle - React, Tailwind, and code Playground

by vace

HTML

<script src="https://o4e068rzf.qnssl.com/c3js/c3.min.js"></script>

JavaScript

var rnd = c3.rndInt

// window.addEventListener
var stage = new c3.Stage(window.innerWidth,window.innerHeight)
stage.attach('body')

var group = new c3.Sprite()
stage.addChild(group)

// 创建20个平面
for (var i = 0; i < 10; i++) {
    // 新增面
    var plane = new c3.Plane(100,100)
    // 新增材质
    var material = new c3.Material({
        color:c3.rndColor(),
        opacity:c3.rnd(0.6,1)
    })
    // 设置属性
    plane.translate(rnd(-150,150),rnd(-150,150),rnd(-150,150))
         .rotate(rnd(0,360),rnd(0,360),rnd(0,360))
         .update()
    // 添加材质
    plane.material = material
    // 展示元素
    group.addChild(plane)
    // 绑定事件
    plane.on('mouseover',function(){
        this.scale(1.4,1.4,1.4).update()
    }).on('mouseout',function(){
        this.scale(1,1,1).update()
    })
}


var cube_material = new c3.Material({
    color:c3.rndColor(),
    opacity:c3.rnd(0.6,1),
    image:'url(//o4e068rzf.qnssl.com/c3js/images/main.png)',
    size:'cover'
})
// 创建四个立方体
for (var i = 0; i < 4; i++) {
    var cube = new c3.Cube(rnd(100,250),rnd(100,250),rnd(100,250))
    cube.translate(rnd(-150,150),rnd(-150,150),rnd(-150,150))
         .rotate(rnd(0,360),rnd(0,360),rnd(0,360))
         .update()
   cube.material = cube_material
   group.addChild(cube)

   cube.on('mouseover',function(){
       this.scale(1.2,1.2,1.2).update()
   }).on('mouseout',function(){
       this.scale(1,1,1).update()
   })  
}


function update(){
    stage.camera.rotate(0,'+0.5',0).update()
    cube.rotate('+1','+0.2','-0.2').update()
    requestAnimationFrame(update)
}

update()