WebGL Three.js霓虹立方体切分动画

Neon sliced cube，方块切片效果。

webgl, cube, slice

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let renderer;
let camera;
let controls;
let scene;

const NUM_SLICES = 40;

function init() {
	const container = document.getElementsByClassName('container')[0];
	const w = container.offsetWidth;
	const h = container.offsetHeight;
	
	renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
	renderer.setSize(w, h);
	// renderer.setClearColor(0xEFEFEF);
	renderer.setPixelRatio(window.devicePixelRatio)
	container.appendChild(renderer.domElement);
	
	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera(15, w/h, 1, 1000);
	camera.position.set(7, 4, 0);
	camera.lookAt(scene.position);
	
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
	controls.enableDamping = true;
	controls.dampingFactor = 0.2;
	controls.rotateSpeed = 0.3;
	
  const topLight = new THREE.DirectionalLight(0xFFFFFF, 1);
  const leftLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
  const rightLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
  const sideLightOffset = 0
  topLight.position.set(0, 2, 0);
  leftLight.position.set(sideLightOffset, 0, 2);
  leftLight.lookAt(new THREE.Vector3(sideLightOffset, 0, 0))
  rightLight.position.set(sideLightOffset, 0, -2);
  rightLight.lookAt(new THREE.Vector3(sideLightOffset, 0, 0))
  const ambientLight = new THREE.AmbientLight(0x111111);
	
	scene.add(topLight);
  scene.add(leftLight);
  scene.add(rightLight);
  scene.add(ambientLight);
	
	scene.add(camera);
	
	render();
}

function render() {
	window.requestAnimationFrame(render);
	renderer.render(scene, camera);
	controls.update();
}

function rotateAnim(object) {
  TweenMax.to(object.rotation, 4, {
    // y: Math.PI*2 + Math.PI/4,
    y: (3 * Math.PI)/4,
    repeat: -1,
    ease: Power0.easeNone
  })
}

init();
slicedCube();

window.addEventListener('resize', function() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
}, false);

编译

CSS

HTML

Neon sliced cube，方块切片效果。

webgl, cube, slice

编辑器支持Emmet

快捷键

Neon sliced cube，方块切片效果。

webgl, cube, slice

WebGL Three.js立方体矩阵起伏动画

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：