技術標籤：# 動態構件旋轉立方體線框

旋轉立方體線框

• 示例
• CSS
• JS

示例

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JS

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.2, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.
 
setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry(10, 10, 10, 10, 10, 10); 
const material = new THREE.MeshNormalMaterial({ wireframe: true }); 
const cube = new THREE.Mesh(geometry, material);
scene.add( cube );

camera.
 
position.z = 20;

var quaternion = new THREE.Quaternion();
  quaternion.setFromAxisAngle( new THREE.Vector3( 0,1,0 ), Math.PI / 180 );

function animate() {
	requestAnimationFrame( animate );
  cube.applyQuaternion(quaternion);
	renderer.render( scene, camera );
}
animate();