26three.js开发魔方（二）
2018-05-28 本文已影响12人
狂暴机甲
image.png
好久没有写代码了。复习一下。基本功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-1threejs基本场景</title>
<script type="text/javascript" src="three.r73.js"></script>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="webgl-output"></div>
<script type="text/javascript">
var camera;
var scene;
var renderer;
var width = window.innerWidth;
var height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(-30, 20, 30);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x888888);
var cubeGem = new THREE.BoxGeometry(8, 8, 8);
var cubeMer = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGem, cubeMer);
cube.position.set(0, 0, 0);
scene.add(cube);
var amblight = new THREE.AmbientLight(0x666666);
scene.add(amblight);
var spotlight = new THREE.SpotLight(0x888888);
spotlight.position.set(-40, 40, 40);
scene.add(spotlight);
var axes = new THREE.AxisHelper(8);
scene.add(axes);
document.getElementById('webgl-output').appendChild(renderer.domElement);
renderer.render(scene, camera);
function render() {
requestAnimationFrame(render);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
