cover_image

Three.js 有趣的小立方体

初识Threejs 2025年03月13日 00:00

使用 Three.js 的 WebGL 小实验。three.js 制作了一个小立方体。

图片
实现代码

HTML:

<body></body>
CSS:
body{  margin0;  padding0;  background#222;  overflow: hidden;}
canvas{  position: absolute;  topcalc(50% - 250px);  leftcalc(50% - 250px);  top-webkit-calc(50% - 250px);  left-webkit-calc(50% - 250px);}

JAVASCRIPT:

var w = 500, h = 500;
var renderer = new THREE.WebGLRenderer();renderer.setSize( w, h );document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75,(w/h),0.11000);camera.position.set(404040);camera.lookAt(scene.position);var tiles = [];
function plane(x,y,z,color){  if(color == undefined){    color = 0x555555;  }  this.x = x;  this.y = y;  this.z = z;  this.color = color;  var geometry = new THREE.CubeGeometry( 414 );  var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading:  THREE.NoShading, emissive: this.color } );  geometry.applyMatrix( new THREE.Matrix4().makeTranslation( this.x, this.y, this.z ) );  var tile = new THREE.Mesh( geometry, material );
  scene.add( tile );  tiles.push(tile);}
new plane(-4,0,0,0x444444), new plane(-8,0,4,0x444444), new plane(-4,0,4), new plane(-8,0,0);
var dummy = new THREE.Object3D();dummy.position.x = -6;dummy.position.y = 0.25;dummy.position.z = 2;scene.add( dummy );
var geometry = new THREE.CubeGeometry( 444 );var material = new THREE.MeshLambertMaterial( { color: 0x00FB9F, shading:  THREE.NoShading, emissive: 0x444444 } );var cube = new THREE.Mesh( geometry, material );geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -222 ) );dummy.add( cube );dummy.rotation.x = Math.PI + (Math.PI/2);
var light = new THREE.PointLight( 0xffffff );light.position.set( 101010 );scene.add( light );var rotWorldMatrix;
function rotateAroundWorldAxis( object, axis, radians ) {
  var rotationMatrix = new THREE.Matrix4();
  rotationMatrix.makeRotationAxis( axis.normalize(), radians );  rotationMatrix.multiply( object.matrix );                       // pre-multiply  object.matrix = rotationMatrix;  object.rotation.setEulerFromRotationMatrix( object.matrix );}
var bk = false;function render() {  requestAnimationFrame(render);  if(dummy.rotation.x >= Math.PI*2 || bk == true){    if(dummy.rotation.z <= -(Math.PI/2)){      bk = true;      if(dummy.rotation.x <= (Math.PI + (Math.PI/2))){        if(dummy.rotation.y <= -(Math.PI/2)){          bk = false;          dummy.rotation.x = Math.PI + (Math.PI/2);          dummy.rotation.y = 0;          dummy.rotation.z = 0;        }        else{          dummy.rotation.y -= 0.1        }      }      else{        dummy.rotation.x -= 0.1;      }    }    else{      dummy.rotation.z -= 0.1    }  }  else{    if(bk == true){
    }    else{      dummy.rotation.x += 0.1;    }  }  renderer.render(scene, camera);}render();


源码:

https://codepen.io/motorlatitude/pen/nLOooX


体验:

https://codepen.io/motorlatitude/full/nLOooX





感谢您的阅读      

在看点赞 好文不断  图片

Three.js资源 · 目录
上一篇Three.js 交互动画案例下一篇快来抄!Three.js 艺术工作室官网
继续滑动看下一个
初识Threejs
向上滑动看下一个